将标题从React本机导航传递到Header组件

import React from 'react';
import Header from './Header';

function App() {
  const title = 'React Native Navigation';
  
  return (
    <div>
      <Header title={title} />
      {/* 其他组件 */}
    </div>
  );
}

export default App;

import React from 'react';

function Header(props) {
  return (
    <div>
      <h1>{props.title}</h1>
    </div>
  );
}

export default Header;

import React, { createContext } from 'react';
import Header from './Header';

const TitleContext = createContext();

function App() {
  const title = 'React Native Navigation';
  
  return (
    <TitleContext.Provider value={title}>
      <div>
        <Header />
        {/* 其他组件 */}
      </div>
    </TitleContext.Provider>
  );
}

export default App;

import React, { useContext } from 'react';
import { TitleContext } from './App';

function Header() {
  const title = useContext(TitleContext);
  
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

export default Header;