如何使TabBarNavigator的屏幕在TabBar上不可见?

时间:2018-11-22 11:04:07

标签: react-native react-navigation react-navigation-stack

我使用react-navigation版本3.x。如何使TabBarNavigator的屏幕在TabBar上不可见?

我需要从tabBar删除主屏幕(它应该是不可见的),但是TabBar必须在主屏幕上。

下一个是我的屏幕结构:

const AppStackNavigator = createStackNavigator({
    loginFlow: { 
      screen: createStackNavigator({
        intro: { screen: Intro },
        login: { screen: Login },
        registration: { screen: Registration }
      })
    },
    mainFlow: {
      screen: createStackNavigator({

        // settings: { screen: SettingsScreen },
        someTab: { 
          screen: createBottomTabNavigator({
            main: { screen: Home },
            Tab1: { screen: Tab1 },
            Tab2: { screen: Tab2 },
            Tab3: { screen: Tab3 },
            Tab4: { screen: ChatMain }
          })
        }
      })
    }
  });

2 个答案:

答案 0 :(得分:1)

您的问题用词怪异,但我会为您提供两种解释的答案:

如果要从标签栏中删除屏幕,只需将其注释掉:

// main: { screen: Home },

如果您希望主屏幕与选项卡栏的其余部分位于同一堆栈中,但又不想将其显示在选项卡栏内,则可以将其嵌套在switchNavigator中:

mainFlow: {
  screen: createStackNavigator({
    // settings: { screen: SettingsScreen },
    someSwitch: createSwitchNavigator({
      main: { screen: Home },
      someTab: { 
        screen: createBottomTabNavigator({
          Tab1: { screen: Tab1 },
          Tab2: { screen: Tab2 },
          Tab3: { screen: Tab3 },
          Tab4: { screen: ChatMain }
        })
      }
    })
  })
}

答案 1 :(得分:0)

实际上,我只是使用了自己的TabBar组件。只需使用tabBarComponent属性。