Question

问题：我有一个DrawerNavigator，其中包含一个包含StackNavigator的TabNavigator，我需要的是标题中的常规三栏图标，用于打开抽屉而不是向右滑动

我的解决方案：将包含StackNavigator的TabNavigator放入StackNavigator中，并将StackNavigator放入DrawerNavigator中

我的解决方案出现问题：当我在TabNavigator中导航时，我得到双标题（这是正常的，因为我有2个StackNavigators）我只能隐藏后箭头，我总是左边有3个标签图标标题。

请问如何隐藏包含TabNavigator的父标题？

＆＃13;

//the drawer navigator
const DNav = DrawerNavigator({
        SportWall: {
            screen: SportWall
            }
        })
        
//the stack that contains the tab navigator
export default StackNavigator({
    SportWall: {
        //just to show the header with the 3 bars icon
        screen: SportWall
    }
    
render() {
  return (
      <Tabs/>
  )
}
    
//the tab navigator
const Tabs = TabNavigator({
    AllPubs: {
        screen: AllPubs
    },
    FriendsPubs: {
        screen: FriendsPubs
    },
});

//the stack inside each tab 
export default StackNavigator({
    AllPubs: {
        screen: AllPubs,
    },
    Pub: {
        screen: Pub, navigationOptions: {tabBarVisible: false}
    },...

＆＃13;

Answer 1

您好，您可以使用此示例中的StackNavigator并使用headerMode: 'screen'：

const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen }
  },{ 
    headerMode: 'screen' 
  }
);

有关详细信息，请参阅here。

Answer 2

您不应仅使用StackNavigator来显示显示抽屉的标题。你可以设置一个自定义标题，左边是汉堡包按钮，用于触发所有需要它的屏幕上的抽屉onPress：

<Button
  onPress={() => this.props.navigation.navigate('DrawerOpen')}
  title="Open drawer"
/>

不要忘记将headerMode: "none"添加到导航器选项

React-Navigation：隐藏父标题

2 个答案: