Header 在抽屉侧边菜单上方呈现

Question

Image link

当我打开抽屉时，header 图标和边框在抽屉侧菜单上方仍然可见。即使抽屉打开，菜单图标和徽标仍会出现。我使用过堆栈导航器和抽屉导航器。

const DrawerNav = DrawerNavigator({
    WEB: { screen: ScanScreen },
   },{
       initialRouteName: 'WEB',
       drawerPosition: 'right',
});
const PrimaryNav = StackNavigator({
    LoginScreen: { screen: LoginScreen, navigationOptions : {header: null} },
    DrawerNav: { screen: DrawerNav },
}, {
  headerMode: 'float',
  navigationOptions: ({navigation}) => ({
      initialRouteName: 'LoginScreen',
      headerTransparent: true,
    headerStyle: styles.header,
    headerTitleStyle : styles.headerTitleStyle,
    headerBackTitleStyle : styles.headerBackTitleStyle,
    headerLeft: <Image source={Images.logo_splash} style={styles.logo} />,
    headerRight: <TouchableOpacity onPress={() => navigation.navigate('DrawerToggle')}>
                    <Image source={Images.icon_navigation} style={styles.menu}/>
                </TouchableOpacity>
  })
});

StyleSheet.create({
  header: {
    backgroundColor: Colors.clear,
    borderBottomColor : Colors.pinkDark,
    borderBottomWidth: 0.5,
  },
  headerTitleStyle : {
    color: Colors.white
  },
  headerBackTitleStyle : {
    color: Colors.white
  },
  logo: {
    height:30,
    width:55,
    resizeMode: 'contain',
  },
  menu: {
    height:20,
    width:60,
    resizeMode: 'contain',
  },
})

Answer 1

您需要稍微更改一下导航结构。

现在您有一个 StackNavigator，并且在其中有一个抽屉。由于嵌套，StackNavigator header 将在打开时显示在抽屉上方。

您需要稍微尝试一下设置。一种可行的方法是拥有一个隐藏 header 的根 StackNavigator (1)。在 (1) 中，您将有一个 DrawerNavigator (2)，其中有一个 StackNavigator (3)。在 (3) 中，您将拥有自己的 WEB 屏幕。在 (1) 中，您可以拥有另一个带有 LoginScreen 的 StackNavigator。

Header 在抽屉侧边菜单上方呈现

Header is rendering above on top of drawer sidemenu

drawer

react-native

react-navigation