React Navigation V2 从底部选项卡导航器中隐藏单个选项卡答案

【问题标题】：React Navigation V2 Hide Single Tab From Bottom Tab NavigatorReact Navigation V2 从底部选项卡导航器中隐藏单个选项卡
【发布时间】：2019-01-19 16:52:52
【问题描述】：

我正在开发一个 React Native 应用程序。当用户加载应用程序时，我希望他们看到的第一个屏幕是主屏幕，以告诉他们应用程序的一些功能。目前，我正在使用带有嵌套 StackNavigator 的 BottomTabNavigator。我已经能够添加我的主屏幕，但它总是显示在 TabNavigator 中。有没有办法让单个标签项不出现在任何屏幕中？

PS。我尝试使用 StackNavigator 作为我的父级，如下所示，但我的 TabNavigator 没有显示：

const AppNavigator = createBottomTabNavigator({
    Item1: Item1,
    Item2: Item2,
    Item3: Item3, 
    Item4: Item4,
    Item5: Item5
});

const MainNavigator = createStackNavigator({
    Home: Home,
    Content: AppNavigator
}

有什么想法吗？

更新

如果我的屏幕名为 Item1、Item2、Item3、Item4、Item5 和 Home，我想让它首先显示 Home。另外，我希望 TabBar 在底部可见，但它不能包含 Home 屏幕。

【问题讨论】：

我无法清楚地理解，“任何屏幕中都不存在单个标签项”是什么意思？你能详细说明一下吗
@YogarajSaravanan 我更新了上面的问题以获得更多细节。

标签： reactjs react-native react-navigation

【解决方案1】：

创建一个自定义 tabBarComponent 供您的 Tab Navigator 使用。

通过该自定义 tabBarComponent 中的路由进行映射，如果 route.routeName === 'Home'，则不为该 Tab 呈现任何内容。

const TabBar = props => {
  return (
      {navigation.state.routes.map((route, i) => {
          if (route.routeName !== 'Home') {
          return (
              <Tab...

【讨论】：

【解决方案2】：

我认为 SwitchNavigator 是您需要的 https://reactnavigation.org/docs/en/switch-navigator.html。试试这样

const MainNavigator = createSwitchNavigator({
    Home: Home,
    Content: AppNavigator
}

如果你想要 TabNavigator，你可以简单地做同样的事情

const MainNavigator = createBottomTabNavigator({
    Home: Home,
    Content: AppNavigator
}

【讨论】：

这是个好主意，但底部的 TabBar 不可见。
这最终会显示父 TabBar 而不是子 TabBar。想想这个。我想要一个他们永远无法返回的登录页面。一旦他们打开应用程序就会显示它，但他们将无法导航回它。

【解决方案3】：

您可能希望将主应用程序选项卡导航器嵌套在另一个选项卡导航器中，如下所示：

const AppNavigator = TabNavigator({
  Main: { screen: MainScreen },
  Settings: { screen: SettingsScreen },
});

export default TabNavigator(
  {
    Home: { screen: HomeScreen },
    App: { screen: AppNavigator },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarVisible: false,
    }),
  }
);

【讨论】：

这很接近，但它没有显示 App Tab Navigator。
我不确定你想把标签导航器放在哪里？主屏幕上有一个，但主屏幕不正确？
我希望导航器显示在所有屏幕上。我只是希望主屏幕永远不会显示在选项卡导航器上。
标签栏本质上总是有一个活动标签。因此，您必须首先确定在显示“主页”内容时要激活哪个选项卡。如果那是“第 1 项”，您需要在第 1 项的屏幕内显示一些条件逻辑，以显示“主页”内容或“第 1 项”内容。