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

agm1984

我已经阅读了无数的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 }]
})
agm1984

我只是用以下代码解决了它:

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')起作用(在本问题中我的代码上下文中)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

重置主屏幕的导航堆栈(React Navigation和React Native)

如何在React Native导航器中禁用向后滑动

如何在React Native导航器中传递参数?

如何在React Native中更改导航标题的颜色?

如何在React Navigation中的堆栈导航内添加抽屉

React Navigation(V2):如何在Drawer Navigator中设置图标和堆栈导航器的标签?

如何在React Native中实现标签导航?

如何在React Native中实现Drawer导航器?

在React Native中如何在屏幕之间导航?

如何在React Native中隐藏和显示导航栏?

如何在React Native中从子组件回调到父组件

如何在React Native中创建标签导航栏?

如何在react-native中隐藏和显示堆栈导航器标题?

导航回NavigatorIOS react native

如何在React中从堆栈调用导航事件?

如何在React Native中从组件类导航

如何在react-navigation v5中同时呈现Tab导航和Drawer导航

如何从React Child路线导航回父级

React Native-如何在导航器中将函数传递到堆栈屏幕?

如何在React Native中将React导航堆栈标头移动到屏幕底部?

在React Native中如何在嵌套堆栈导航中的标题上添加按钮

如何在react-native中隐藏顶部导航栏?

如何在 React Native 中不使用堆栈导航器重定向到页面?

如何在 react-native 中访问导航对象

如何在 React Native 中显示底部导航上方的组件?

导航问题 React native , stack navigator

无法从 React Native 中的子类堆栈导航器更新父类状态

如何在 React-Native 模式中定义堆栈导航器?

如何在 React Native 的父导航中导航到屏幕