React-Navigation：隐藏父标题答案

【问题标题】：React-Navigation: Hide Parent headerReact-Navigation：隐藏父标题
【发布时间】：2017-09-02 05:02:35
【问题描述】：

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

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

我的解决方案存在问题： 当我在 TabNavigator 中导航时，我得到了双标题（这很正常，因为我有 2 个 StackNavigator）并且我只能隐藏后箭头标题，我总是留下3 个标签图标标题。

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

//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}
    },...

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

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

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

更多信息请参见here。

【讨论】：

将 HomeScreen 的 headerMode 更改为 'screen' 不会在选项卡内导航时隐藏它，因为 HomeScreen 有自己的 stacknavigator，每个选项卡都有自己的 stacknavigator

【解决方案2】：

您不应该只使用 StackNavigator 来显示显示抽屉的标题。您可以使用左侧的汉堡按钮设置一个自定义标题，该按钮会为所有需要它的屏幕触发抽屉 onPress：

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

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

【讨论】：