Question

我已经阅读了无数的反应导航文档，我知道有办法做到这一点，但这绝对是我所说的非平凡而且绝对不直观。

我有一个根导航堆栈：

export const NavigationStack = StackNavigator({
    Splash: {
        screen: Splash
    },
    Signup: {
        screen: Signup
    },
    Login: {
        screen: SignIn
    },
    ForgottenPassword: {
        screen: ForgottenPassword
    },
    Discover: {
        screen: Discover
    },
    ProfileShow: {
        screen: ProfileShow
    }
}, {
    headerMode: 'none'
})

ForgottenPassword屏幕是一个子堆栈导航器：

import { StackNavigator } from 'react-navigation'
import PasswordResetProcess from './index'

const ForgottenPassword = StackNavigator({
    ResetPassword: {
        screen: PasswordResetProcess
    }
}, {
        headerMode: 'none'
    })

export default ForgottenPassword

在index.js容器组件上，有一个我将导航传递给的子组件，如下所示：

    switch (lastCompletedStep) {
        case NEW_RESET_REQUEST:
            return <InputTel navigation={navigation} />

        case INPUT_TEL:
            return <ResetPassword navigation={navigation} />

该ResetPassword组件是有问题的组件。它会触发一个动作创建者并将this.props.navigation传递给动作创建者：

await props.handleResetSubmit(token, props.navigation)

在此动作创建者中，props.navigation可用navigation。我可以做得很好：

navigation.navigate('Discover') // see how this is from the root Navigation Stack

但是，我不能这样做：

navigation.dispatch({
    type: 'Navigation/RESET',
    index: 0,
    actions: [{ type: 'Navigate', routeName: 'Discover' }]
})

它抛出了这个错误：

[编辑]我刚试过这个，它也产生了同样的错误：

    navigation.dispatch(NavigationActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'Discover' })]
    }))

如何从此处导航到Discover时重置堆栈？

我觉得答案是导航以在某种子操作的同时发现并重置堆栈，但我不知道从哪里开始将它们放在一起。 react-navigation文档对于说明子级到父级操作是非常可怕的。

以下是我最好的猜测：

navigation.dispatch({
    type: 'Navigation/NAVIGATE',
    routeName: 'Discover',
    actions: [{ type: 'Reset', index: 0, key: null }]
})

Answer 1

我刚用这段代码解决了它：

navigation.dispatch(NavigationActions.reset({
    index: 0,
    key: null,
    actions: [NavigationActions.navigate({ routeName: 'Discover' })]
}))

秘诀是添加key: null，我以前见过人们。当你重置时，它是一个非常重要的元素。

以下是我发现的文档说明：

https://github.com/react-community/react-navigation/issues/1127

我认为这是有效的，因为NavigationActions知道根导航堆栈，所以它的工作原理与navigation.navigate('Discover')相同（在本问题的代码上下文中）。

Answer 2

在反应导航的版本> 2中，NavigationActions.reset（）不起作用。您应该改用StackActions.reset（）：

import { NavigationActions, StackActions } from 'react-navigation';
const resetStackAction = StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'Discover' })],
    });
this.props.navigation.dispatch(resetStackAction);

如何在React Native中同时重置导航堆栈时从子堆栈导航器导航回父级

2 个答案: