时间戳

首页 > 解决方案 > 如何在 TabNavigator 的特定屏幕上隐藏标题

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

问题描述

我有一个标签导航器：

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）上都有一个默认标题（没有标题，右侧没有按钮，...）。

标签： react-nativereact-navigation

解决方案

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

推荐阅读