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，这是不应该的。从逻辑上讲，一旦注销，就不应该再回去了。

下图显示了问题注意底部导航栏仍然存在，如果单击后退按钮，它将返回到上一个屏幕

****更新固定：我通过将所有堆栈合并为1来固定它。如果你想做STACK1>MyTabs>STACK2.通过执行STACK1>MyTabs>堆栈1.

Answer 1

这样想吧，您有一个选项卡导航、堆栈导航和登录屏幕。您导航的父母状态为Tab Nav>堆栈导航>登录屏幕。因此，当你在堆栈导航的任何屏幕上时，你都会看到选项卡。你需要做的恰恰相反。

将选项卡导航放入堆栈导航器中，并将其命名为应用程序导航器。创建另一个Stack Nav并将其命名为CredentialNavigator，并将您的登录/注册屏幕放入其中。在主/根导航文件中，您可以根据登录状态动态呈现您的CredentialNavigator或AppNavigator。

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

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