我已经阅读了无数的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' }]
})
它引发此错误:
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 }]
})
我只是用以下代码解决了它:
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] 删除。
我来说两句