Question

我有一个Tab Navigator：

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

不是为TabNav定义navigationOtions，而是在每个TabNavigator屏幕中添加navigationOtions，然后在otherPage中设置header：null将起作用。例如

＆＃13;

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'
    },
  }
});

＆＃13;

Answer 2

这可以解决问题！

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

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

2 个答案: