反应导航5标题未显示

时间:2020-05-24 17:50:20

标签: react-native react-navigation react-navigation-v5 react-navigation-drawer

使用反应导航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> );

enter image description here

0 个答案:

没有答案