如何跳转到不同的堆栈导航器并使用react-navigation关闭前一个？

Question

我正在使用react-navigation并在单独的文件AuthedRouter和NonAuthedRouter中有2个不同的堆栈路由器。它们各自具有不相关的屏幕，没有重叠。

AuthedRouter看起来像：

const AuthedRouter = StackNavigator({
  Home : { screen: Home }
})

NonAuthedRouter.js看起来像：

const NonAuthedRouter = StackNavigator({
  Signup: { screen : Signup }
  SignupTwo : { screen : SignupTwo }
})

在我的App.js中，我检查用户应用程序状态，如果用户需要注册，我会在我的渲染方法中返回NonAuthedRouter。我的问题是如何在注册完成后导航到AuthedRouter的主屏幕？此外，我想确保它不正确，并且NonAuthedRouter屏幕100％从内存/等中删除。

谢谢。

Answer 1

而不是使用两个StackNavigator，你只需使用一个就可以执行相同的操作。

const MainRouter = StackNavigator({
  Signup: { screen : Signup },
  SignupTwo : { screen : SignupTwo },
  Home : { screen: Home }
})

如果用户已注册，只需导航到主屏幕，用户就无法从主屏幕返回，因为堆栈中没有屏幕。

如果它是新用户然后导航到注册屏幕，然后导航到SignupTwo屏幕并完成注册，只需重置堆栈并导航到主屏幕。重置将清除堆栈屏幕。阅读react-navigation文档以获取更多信息

重置StackNavigator的方法

this.props.navigation.dispatch(NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Home'})
  ]
}));

Answer 2

这是我在重置之前的“登录堆栈，我正在导航时”导航到“抽屉堆栈”的方式：

            export const Drawer = createDrawerNavigator(
                {
                    MyAccount: {screen: TabsStack},
                },


        export const LoginStack = createStackNavigator(
                {
                    Login: {screen: LoginPage},
                }
            );


        export const RootStack = createStackNavigator({
                Login: {screen: LoginStack},
                Drawer: {screen: Drawer},
            },
            {
                initialRouteName: 'Login',
                headerMode: 'none'
            },

然后在“登录屏幕”上执行： 按下按钮/单击：

     <TouchableOpacity style={styles.signuptext} onPress={this.onLoginSuccess.bind(this)}>
                            <Text style={styles.signuptext}> Sign Up Now </Text>
                        </TouchableOpacity>

你像这样调用“onLoginSuccess”方法：

    onLoginSuccess = () =>{
            {
                const navigateAction = StackActions.reset({
                    index: 0,
                    key: null,
                    actions: [NavigationActions.navigate({ routeName: 'Drawer' })]
                })
                this.props.navigation.dispatch(navigateAction)
            }

注意：这会在导航到“抽屉”堆栈时基本上重置“登录”堆栈。所以现在当您按下后退按钮时，您无法返回“登录堆栈”的登录屏幕。