React Native：选项卡和堆栈导航集成

Question

我对选项卡导航和堆栈有疑问。

以下是堆栈和标签导航：

export function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor={COLORS.white}
      barStyle={{ backgroundColor: COLORS.mediumgrey }}
      inactiveColor={COLORS.grey}>
...
  <Tab.Screen
        name="More"
        component={MoreStack}
        options={{
          tabBarLabel: <Text style={styles.bottomNavBarTextSize}>More</Text>,
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="settings" color={color} size={26} />
          )
        }
        } />

组件“MoreStack”是一个堆栈导航，如下所示：

function MoreStack() {
 return (
   <Stack.Navigator
     initialRouteName="More"
     screenOptions={{
       headerStyle: { backgroundColor: COLORS.mediumgrey },
       headerTintColor: COLORS.white,
       headerTitleStyle: styles.navBarTitleFont
     }}>
     <Stack.Screen name="More" component={MoreScreen} options={{ headerShown: false }} />
      ...
     <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
   </Stack.Navigator>
 );
}

在 MoreScreen 页面中，我有以下注销代码：

  logOut = () => {
    firebase.auth().signOut().then(() => {
      this.props.navigation.replace('Login')
    });
  }

我遇到的问题是它确实进入了登录页面，但底部导航栏没有消失。如果我想返回，那么它会返回到不应该返回的 MoreScreen。按理来说，退出后就不能返回了。

下图显示问题 Notice how the bottom navigation bar is still there and if the back button is clicked, it goes back to the previous screen

****更新已修复：我通过将所有堆栈合并为 1 来修复它。如果您想执行 STACK1>MyTabs>STACK2，它将不起作用。通过执行 STACK1>MyTabs>Stack1.

修复它

Answer 1

这样想，您有标签导航、堆栈导航和登录屏幕。您导航的父级状态是 Tab Nav > Stack Nav > Login Screen。因此，当您在 Stack Nav 的任何屏幕中时，您将看到选项卡。你需要做的恰恰相反。

将您的 Tab Nav 放入 Stack 导航器并将其命名为 App Navigator。并创建另一个 Stack Nav 并将其命名为 CredentialNavigator，然后将 Login/Signup 屏幕放入其中。在您的 Main/Root 导航文件中，您可以根据您的登录状态动态呈现您的 CredentialNavigator 或 AppNavigator。

isLogged ? false return <CredentialNavigator/> : return <AppNavigator>

这当然很简单，但是你绝对可以展开这棵树。我建议你浏览几乎所有的 React Navigation 5 文档，它很容易理解并且信息量很大。

React Native：选项卡和堆栈导航集成

React Native: Tab and Stack Navigation Integrited

javascript

navigation

reactjs

react-native