Question

当我打开抽屉时，在抽屉侧面菜单上方仍可看到标题图标和边框。即使抽屉打开，菜单图标和徽标仍会显示。我使用了堆栈导航器和抽屉导航器。

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标题将在打开时显示在抽屉上。

您需要稍微玩一下设置。应该工作的一种方法是使用具有隐藏标头的根StackNavigator（1）。在（1）中你将有一个DrawerNavigator（2），里面有一个StackNavigator（3）。在（3）中你将拥有你的WEB屏幕。在（1）中，您可以使用另一个带有LoginScreen的StackNavigator。

标题在抽屉侧面菜单上方呈现

1 个答案: