使用反应导航5,我想为所有“抽屉屏幕”创建一个动态地图,但是标题未显示为代码:
<NavigationContainer>
<Drawer.Navigator
drawerContent={props => <DrawerContent {...props} />}>
{stackNavigItens.map((props, r) => (
<Drawer.Screen
key={r.name}
name={r.name}
component={({navigation}) => (
<Stack.Navigator
initialRouteName="Home"
headerMode="screen"
screenOptions={{
headerTitle: r.label,
headerStyle: {
backgroundColor: '#2e72e8',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
{...props}>
<Stack.Screen
name={r.name}
component={r.component}
options={{
title: r.label,
headerLeft: () => (
<Icon.Button
name="ios-menu"
size={25}
backgroundColor="#2e72e8"
onPress={() => {
navigation.openDrawer();
}}
/>
),
}}
{...props}
/>
</Stack.Navigator>
)}
{...props}
/>
))}
</Drawer.Navigator>
</NavigationContainer>
如果我在如下所示的const中使用每个createStackNavigator,然后调用Drawer内部组件,则标题正确显示,我不知道为什么?我认为可能是由于{导航}箭头功能,但也无法正常工作。
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#2e72e8',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
headerLeft: () => (
<Icon.Button
name="ios-menu"
size={25}
backgroundColor="#2e72e8"
onPress={() => {
navigation.openDrawer();
}}
/>
),
}}
/>
</HomeStack.Navigator> );