如何跳转到不同的堆栈导航器并使用反应导航关闭前一个？答案

【问题标题】：How to jump to different stack navigator and close previous one with react-navigation?如何跳转到不同的堆栈导航器并使用反应导航关闭前一个？
【发布时间】：2017-10-25 22:41:16
【问题描述】：

我正在使用 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% 从内存/等中删除。

谢谢。

【问题讨论】：

reacttraining.com/react-router/native/guides/philosophy

标签： react-native react-navigation

【解决方案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'})
  ]
}));

【讨论】：

【解决方案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)
            }

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

【讨论】：