react native中使用@react-navigation/native进行自定义头部

在React Native项目中使用@react-navigation/native库时，可以通过创建自定义头部组件来实现。以下是一个简单的例子，展示如何创建一个自定义头部组件并将其应用于React Navigation的屏幕导航中。

首先，安装所需的库（如果尚未安装）：

npm install @react-navigation/native

然后，创建一个自定义头部组件，例如CustomHeader.js：

import React from 'react';
import { Text, View } from 'react-native';
 
const CustomHeader = (props) => {
  return (
    <View style={{ flex: 1, backgroundColor: 'blue', alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ color: 'white', fontSize: 20 }}>{props.title}</Text>
    </View>
  );
};
 
export default CustomHeader;

接下来，在使用导航时，将自定义头部组件应用到屏幕导航中：

import { createStackNavigator } from '@react-navigation/stack';
import CustomHeader from './CustomHeader';
 
const Stack = createStackNavigator();
 
function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen 
        name="Home" 
        component={HomeScreen} 
        options={{ 
          headerTitle: props => <CustomHeader {...props} title="Home Screen" /> 
        }}
      />
      <Stack.Screen 
        name="Profile" 
        component={ProfileScreen} 
        options={{ 
          headerTitle: props => <CustomHeader {...props} title="Profile Screen" /> 
        }}
      />
    </Stack.Navigator>
  );
}

在上述代码中，我们创建了一个名为CustomHeader的组件，并通过headerTitle选项将其应用到了每个屏幕导航中。通过传递不同的title属性，我们可以为每个屏幕自定义头部内容。