如何在 TabNavigator 的特定屏幕上隐藏标题

Question

我有一个标签导航器：

const TabNav = createBottomTabNavigator({
Home: {
    screen: HomeScreen,
    navigationOptions: {
        title: 'Home',  
    },
},
OtherPage: {
    screen: OtherPage,
    navigationOptions: {
        title: 'NoHeader!',
    },
},
Profile: {
    screen: ProfileScreen,
    navigationOptions: {
        title: 'Profile',
    }
},
},
{
    tabBarOptions: {
        activeTintColor: 'black',
        style: {
            backgroundColor: 'white'
        },
    }
});

TabNav.navigationOptions = {
title: 'Header Title',
headerRight: (
    <TouchableOpacity
        onPress={() => NavigationService.navigate('Rules')}
    >
        <Icon style={{ paddingRight: 10 }} name="ios-document" > </Icon>
    </TouchableOpacity>
),
headerLeft: null,
}
export default TabNav;

我想在 OtherPage 中隐藏页眉，但在我的主页和个人资料页中需要它。

我尝试在 navigationOptions 中设置 header:null，但它不起作用。

有没有办法做到这一点？ 或者也许可以在堆栈导航器 headerMode:'screen' 中指定？

编辑

我尝试在每个 TabNavigator 屏幕中添加 navigationOtions，并在我的 OtherPage 中将其设置为 null，如下所示：

const TabNav = createBottomTabNavigator({
Home: {
    screen: HomeScreen,
    navigationOptions: {
        title: 'Home',
        tabBarIcon: ({ tintColor, focused }) => (
            <Icon
                name={focused ? 'ios-list' : 'ios-list-outline'}
                size={35}
                style={{ color: tintColor }}
            />
        ),
        headerRight: (
            <TouchableOpacity
                onPress={() => NavigationService.navigate('Rules')}
            >
                <Icon style={{ paddingRight: 10 }} name="ios-document" > </Icon>
            </TouchableOpacity>
        ),
        headerLeft: null,
    },
},
OtherPage: {
    screen: OtherPage,
    navigationOptions: {
        title: 'NoHeader!',
        tabBarIcon: ({ tintColor, focused }) => (
            <Icon
                name={focused ? 'ios-flash' : 'ios-flash-outline'}
                size={35}
                style={{ color: tintColor }}
            />
        ),
        header:null
    },
},
Profile: {
    screen: ProfileScreen,
    navigationOptions: {
        title: 'Profile',
        tabBarIcon: ({ tintColor, focused }) => (
            <Icon
                name={focused ? 'ios-person' : 'ios-person-outline'}
                size={35}
                style={{ color: tintColor }}
            />
        ),
        headerRight: (
            <TouchableOpacity
                onPress={() => NavigationService.navigate('Rules')}
            >
                <Icon style={{ paddingRight: 10 }} name="ios-document" > </Icon>
            </TouchableOpacity>
        ),
        headerLeft: null,
    }
},

但它也不起作用，当我这样做时，我在每个选项卡（甚至是我的 OtherPage）上都有一个默认标题（没有标题，右侧没有按钮，...）。

Answer 1

这就是诀窍！

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileStack,
});

TabNavigator.navigationOptions = {
  // Hide the header from AppNavigator stack
  header: null,
};

https://reactnavigation.org/docs/en/navigation-options-resolution.html

Answer 2

不要为 TabNav 定义 navigationOtions，而是在每个 TabNavigator 屏幕中添加 navigationOtions，然后在 otherPage 中设置 header:null 即可。例如

const TabNav = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home',

      headerRight: ( <
        TouchableOpacity onPress = {
          () => NavigationService.navigate('Rules')
        } >
        <
        Icon style = {
          {
            paddingRight: 10
          }
        }
        name = "ios-document" > < /Icon> < /
        TouchableOpacity >
      ),
      headerLeft: null,
    },
  },
  OtherPage: {
    screen: OtherPage,
    navigationOptions: {
      title: 'NoHeader!',
      header: null
    },
  },
  Profile: {
    screen: ProfileScreen,
    navigationOptions: {
      title: "Profile"
      headerRight: ( <
        TouchableOpacity onPress = {
          () => NavigationService.navigate('Rules')
        } >
        <
        Icon style = {
          {
            paddingRight: 10
          }
        }
        name = "ios-document" > < /Icon> < /
        TouchableOpacity >
      ),
      headerLeft: null,
    }
  },
}, {
  tabBarOptions: {
    activeTintColor: 'black',
    style: {
      backgroundColor: 'white'
    },
  }
});