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

Posted 2023-02-23

【中文标题】React Native - 如何在每个屏幕中保留 TabNavigator

【英文标题】：React native - how to keep TabNavigator in every screen

【发布时间】：2019-08-11 18:50:10

【问题描述】：

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

这很好用，除了我想在每个屏幕中保留底部标签。目前，如果我导航到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？

【参考方案1】：

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

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

【讨论】：

这对我不起作用，因为User 是一个可以通过单击Feed 中的一个用户到达的屏幕，它不是一个独立的屏幕。这就是为什么我最初拥有UserStack 本身的原因。是的，Auth 用于登录

那么您还需要将User 添加到您的FeedScreenStack。如果你想在这种情况下切换标签，你也需要切换标签导航，这对用户来说很烦人，我不建议这样做。

"如果你想在这种情况下切换标签，你也需要切换标签导航，这对用户来说很烦人，我不推荐这个"，我不明白，你能详细说明一下到底是什么问题吗？如果你的意思是，当我从MyProfile 切换回Feed 时，我会登陆UserProfile 并且需要单击返回按钮才能完全返回Feed，那么我想我们可能只是有不同的意见用户体验。还是一般不推荐这样做？

我以这种方式阅读了 ios 人机界面指南，但我不记得由于 Tab 上的操作而看到了 Tab 的切换，但如果您认为合适，当然可以这样做你的用例更好。我个人希望在每个选项卡内都有一个带有推送和弹出功能的 Stack-Navigation，但这可能取决于具体情况。

您的建议是始终将TabNavigator 作为SwitchNavigator 内的顶部项目？