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

React本机导航是指在React应用中，通过使用React Router等路由库来实现页面之间的导航功能。在React中，可以将标题从React本机导航传递到Header组件的方式有多种。

一种常见的方式是通过使用props属性将标题传递给Header组件。在父组件中，可以定义一个变量来存储标题，并将其作为props属性传递给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;

在Header组件中，可以通过props属性来获取传递的标题，并在组件中进行使用。例如：

import React from 'react';

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

export default Header;

这样，就可以将标题从React本机导航传递到Header组件中，并在Header组件中显示标题。

另一种方式是通过使用React Context来传递标题。React Context提供了一种在组件树中共享数据的方式。可以在父组件中创建一个Context，并将标题作为Context的值。然后，在Header组件中通过Context来获取标题。这种方式适用于需要在多个层级的组件中传递数据的情况。

首先，在父组件中创建一个Context，并将标题作为Context的值。例如：

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;

然后，在Header组件中使用Context来获取标题。例如：

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

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

export default Header;

通过使用React Context，可以将标题从React本机导航传递到Header组件中，并在Header组件中显示标题。

以上是将标题从React本机导航传递到Header组件的两种常见方式。根据具体的需求和项目结构，可以选择适合的方式来实现标题的传递。