从内部屏幕返回到父屏幕

Question

我有一个这样的堆栈导航器结构

index.js -> App.js -> LoginStck， HomeNavStack 从成功登录的LoginStck，我转到HomeNavStack 从这样做时开始，我将堆栈重置为只有HomeNavStack(这样做是为了避免返回时登录屏幕(在HomeStack中有4个选项卡，即主页/付款/配置文件/更多，每个选项卡都有单独的堆栈。我在"更多"选项卡中导航到"更多屏幕"并赢得了注销，我需要转到登录堆栈(第一个丢弃所有其他屏幕(。

我确实试过这个'

dothis = async () => {
const someAction = StackActions.reset({
index: 0,
key: null,
actions: [
NavigationActions.navigate({ routeName: 'HomeNavigatorNew'})
]
});
this.props.navigation.navigate(someAction)
}

但没有用。任何见解....？？ 提前致谢

'

Answer 1

在登录和其他屏幕之间切换的推荐方法是使用createSwitchNavigator。

欲了解更多信息，请查看：

https://reactnavigation.org/docs/en/switch-navigator.html#docsNav

我创建了一个对您的案例有帮助的简单示例：

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,
}
);