在React Native中设置可自定义的Header

Question

我希望在React Native上为Notes存储应用程序创建Header。到目前为止，我已经尝试过使用stackNavigator，但我被困在如何添加菜单图标上，该图标将打开抽屉。我尝试在stackDesignHead中使用HeaderLeft，但它给出了一个错误。也不建议使用FAB。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import HomePage from './src/HomePage/HomePage';
import NotesFolder from './src/notes';
import CreateNewFolder from './src/CreateNewFolder';
import Icon from 'react-native-vector-icons/Ionicons';
import Constants from 'expo-constants';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
const stackDesignHead = {
title: "Notes Classifier", 
headerTintColor:"white", 
headerStyle:{ 
backgroundColor:"#fcba03"
},
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: 'center'
}
function LeftDrawer () {
return(

<Stack.Navigator>
<Stack.Screen 
name="HomePage"
component={HomePage} 
options={stackDesignHead}
/>
<Stack.Screen 
name="NotesFolder"
component={NotesFolder} 
options={{...stackDesignHead,title:"Notes"}}
/>
<Stack.Screen 
name="CreateNewFolder"
component={CreateNewFolder} 
options={{...stackDesignHead,title:"+ new Folder"}}
/>
</Stack.Navigator>
)
}
const menuDesignHead = {
title: "Notes Classifier",
headerTintColor:"white",
headerStyle:{
backgroundColor:"#fcba03"
},
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: 'center'
}
function App () {
return(
<View style={styles.container}>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen 
name="Home"
component={LeftDrawer} 
options={{menuDesignHead}}
/>
</Drawer.Navigator>
</View>
);
}
export default()=>{
return(
<NavigationContainer>
<App/>
</NavigationContainer>
)
}

我是一个反应原生的新手，不知道创建头的各种方法。

Answer 1

提供一种在React导航文档中创建自己的自定义标头的方法。

用自定义组件替换标题

有时，您需要更多的控制权，而不仅仅是更改标题的文本和样式——例如，您可能需要渲染一个图像来代替标题，或者将标题制作成一个按钮。在这些情况下，您可以完全覆盖用于标题的组件，并提供自己的组件。

示例

function LogoTitle() {
return (
<Image
style={{ width: 50, height: 50 }}
source={require('@expo/snack-static/react-native-logo.png')}
/>
);
}
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ headerTitle: props => <LogoTitle {...props} /> }}
/>
</Stack.Navigator>
);
}