我在“标签导航”和“堆栈”方面遇到了问题。
以下是堆栈和选项卡导航:
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> Stack1修复了此问题。
以这种方式考虑,您将具有选项卡导航,堆栈导航和登录屏幕。导航的父母状态为“选项卡导航”>“堆栈导航”>“登录屏幕”。因此,当您在Stack Nav中的任何屏幕中时,都将看到选项卡。您需要做的是相反的。
将Tab Nav放入Stack导航器中,并将其命名为App Navigator。然后创建另一个Stack Nav,并将其命名为CredentialNavigator,然后将“登录/注册”屏幕放入其中。在主/根导航文件中,您可以根据登录状态动态呈现CredentialNavigator或AppNavigator。
isLogged ? false return <CredentialNavigator/> : return <AppNavigator>
这当然很简单,但是您绝对可以扩展此树。我建议您阅读几乎所有的React Navigation 5文档,这非常容易遵循并且非常有用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句