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。因此，当您在堆栈导航中的任何屏幕中时，您都会看到选项卡。你需要做的恰恰相反。

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

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

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

React Native：集成标签和堆栈导航

1 个答案: