在React Native中如何在重置导航堆栈的同时从子Stack Navigator导航回父项

Question

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

我有一个根导航堆栈：

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' }]
})

它引发此错误：

[edit]我只是尝试了一下，它还产生了相同的错误：

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