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屏幕并完成注册，只需重置堆栈并导航到主屏幕。重置将清除堆栈屏幕。阅读反应导航文档以获取更多信息

重置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)
            }

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

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

2 个答案: