Question

我正在开发一个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 的屏幕， strong>和家庭，我要先显示家庭。另外，我希望TabBar在底部可见，但不能包含主页屏幕。

Answer 1

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

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

Answer 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
}

Answer 3

创建一个自定义tabBarComponent供Tab导航器使用。

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

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

React Navigation V2从底部标签导航器隐藏单个标签

3 个答案: