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

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 屏幕是一个子 Stack Navigator：

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

How do I reset the stack while navigating to Discover from here?

我觉得答案是在进行某种子操作的同时导航以发现和重置堆栈，但我不知道从哪里开始将它们放在一起。 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

在 React 导航的版本 >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 中同时重置导航堆栈时从子 Stack Navigator 导航回父级

How to navigate from a child Stack Navigator back to parent while resetting navigation stack at the same time, in React Native

javascript

react-native

react-navigation