React native - 如何在每个屏幕中保留 TabNavigator

Question

我在带有 react-navigation 的 React 本机应用程序中结合使用选项卡导航器、堆栈导航器和切换导航器。

这很好用，除了我想在每个屏幕中保留底部标签。目前，如果我导航到 UserProfile 屏幕，底部的标签就会消失。

App.js:

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  MyProfile: { screen: ProfileScreenStack },
});

const UserStack = createStackNavigator(
  { 
    UserProfile: { screen: userProfile },
    Comments: { screen: comments }
  }
);

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    User: UserStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

为了解决这个问题，我尝试从选项卡导航器中制作一个组件，然后将其导入 userProfile.js，例如 <BottomTab />。

bottomTab.js:

const BottomTab = createBottomTabNavigator({
    Feed: { screen: FeedScreenStack },
    MyProfile: { screen: ProfileScreenStack },
})

export default BottomTab

但这不起作用，因为在 react-navigation 3 中，我必须直接设置应用程序容器，但我不确定如何绕过它。我能想到的唯一其他解决方案是创建一个自定义组件，它只是一个带有指向不同页面的按钮的栏，但我想知道我是否可以只使用 TabNavigator？

Answer 1

推荐的方法是 TabNavigation 是导航堆栈中的顶级项目。在每个选项卡中，您可能有不同的 StackNavigation。如果您将 SwitchNavigation 用于 Auth，这可能意味着登录屏幕，您可以将 SwitchNavigation 与两个子 Auth 和 Tab 放在顶部，并在作为 TabNavigation 子级的不同 StackNavigations 中包括 Home、User、Feed 等。例如，您可以更改如下：

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  User: { screen: UserStack },
});

const UserStack = createStackNavigator({ 
  UserProfile: { screen: userProfile },
  Comments: { screen: comments },
  MyProfile: { screen: ProfileScreenStack },
});

const MainStack = createSwitchNavigator({
  Home: TabStack,
  Auth: AuthStack
},
{
  initialRouteName: 'Home'
});

React native - 如何在每个屏幕中保留 TabNavigator

React native - how to keep TabNavigator in every screen

navigator

tabnavigator

reactjs

react-native

react-navigation