React Native-如何将TABNAVIGATOR保持在每个屏幕中

Question

我正在使用Tab Navigator，stack Navigator和带有react-navigation的React Native应用程序中的Switch nagivator的组合。

这很好，除了我想将底部选项卡放在每个屏幕中。当前，如果我导航到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是导航堆栈中的首要项目。在每个选项卡中，您可能都有不同的堆栈行动。如果您使用switchNavigation进行AUTH，这可能意味着登录屏幕，则可以将SwitchNavigation放在两个孩子Auth和Tab的顶部，并包括家，用户，Feed等。在不同的stacknavigations中，这些堆栈纳维措施是TabNavigation的孩子。例如，您可以如下更改：

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'
});