[英]Going back from inner screen to parent screen
I have a stack navigator structure like this 我有这样的堆栈导航器结构
index.js -> App.js -> LoginStck, HomeNavStack From LoginStck on successful login I go to HomeNavStack and from while doing this I reset the stack to have only HomeNavStack(did that to avoid login screen when going back) In HomeStack there are 4 tabs namely Home/Payment/Profile/More with separate stack for each tab. index.js-> App.js-> LoginStck,HomeNavStack成功登录后,从LoginStck转到HomeNavStack,从此同时我将堆栈重置为只有HomeNavStack(这样做是为了避免在返回时避免登录屏幕)在HomeStack中4个标签,分别是首页/付款/配置文件/更多,每个标签具有单独的堆栈。 I navigate to MoreScreen within More tab and won logout I need to go to Login Stack(the very first one discarding all other screen).
我导航到“更多”选项卡中的“更多屏幕”,并退出,我需要进入“登录堆栈”(第一个丢弃所有其他屏幕的屏幕)。
I did try this` 我确实尝试过这个`
dothis = async () => {
const someAction = StackActions.reset({
index: 0,
key: null,
actions: [
NavigationActions.navigate({ routeName: 'HomeNavigatorNew'})
]
});
this.props.navigation.navigate(someAction)
}
but didn't work. 但是没有用 Any insights....??
有什么见解.... ?? Thanks in Advance
提前致谢
` `
The recommend way to switch between Login and other screens is by using createSwitchNavigator
. 在登录屏幕和其他屏幕之间切换的推荐方法是使用
createSwitchNavigator
。
For more information please check: 有关更多信息,请检查:
https://reactnavigation.org/docs/en/switch-navigator.html#docsNav https://reactnavigation.org/docs/en/switch-navigator.html#docsNav
I created a simple example that can be helpful for your case: 我创建了一个简单的示例,可以为您的案例提供帮助:
import React from 'react';
import {
View,
Text,
Button,
} from 'react-native';
import {
createStackNavigator,
createBottomTabNavigator,
createSwitchNavigator,
} from 'react-navigation';
class LoginScreen extends React.Component {
render() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>LoginScreen</Text>
<Button
title={'Login'}
onPress={() => this.props.navigation.navigate('HomeStack')}
/>
</View>
)
}
}
class PaymentScreen extends React.Component {
render() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>PaymentScreen</Text>
</View>
)
}
}
class ProfileScreen extends React.Component {
render() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>ProfileScreen</Text>
</View>
)
}
}
class MoreScreen extends React.Component {
render() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>MoreScreen</Text>
<Button
title={'Logout'}
onPress={() => this.props.navigation.navigate('LoginStack')}
/>
</View>
)
}
}
const PaymentStack = createStackNavigator(
{
Payment: PaymentScreen,
}
);
const ProfileStack = createStackNavigator(
{
Profile: ProfileScreen,
}
);
const MoreStack = createStackNavigator(
{
More: MoreScreen,
}
);
const HomeStack = createBottomTabNavigator(
{
PaymentStack: PaymentStack,
ProfileStack: ProfileStack,
MoreStack: MoreStack,
}
);
const LoginStack = createStackNavigator(
{
Login: LoginScreen,
}
);
export default createSwitchNavigator(
{
LoginStack: LoginStack,
HomeStack: HomeStack,
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.