我有一个使用 Redux 框架的 React Native 应用程序,我正在使用 Navigator 组件来处理导航。我在使导航正常工作时遇到了一些麻烦,而且我找不到任何好的示例来说明如何正确执行此操作,因此我正在寻求一些帮助和说明。
这是我目前所拥有的要点,它正在工作,但我不知道我是否做对了:
根组件
...
renderScene(route, navigator) {
console.log('RENDER SCENE', route);
const Component = route.component;
return (
<Component navigator={navigator} route={route} {...this.props} />
)
}
render() {
return (
<Navigator
renderScene={(route, nav) => this.renderScene(route, nav)}
initialRoute={{ name: 'Signin', component: Signin }} />
)
}
登录组件
...
componentWillReceiveProps(nextProps) {
if (!this.props.signedIn && nextProps.signedIn) {
console.log('PUSHING TO MAIN');
nextProps.navigator.push({ name: 'Main', component: Main });
}
}
问题:
1:我的第一个想法是我应该将 navigator.push
代码移动到一个 Action 中。然而 componentWillReceiveProps
是调用 Action 的正确位置吗?当加载 Signin
组件时,如果用户已经有事件 session ,它会触发一个操作让用户登录。默认情况下,他们没有登录,所以当下一个 Prop 通过时,我检查它是否改变,然后推送到 Main
。
2:在记录“PUSH TO MAIN”后立即在我的控制台日志中,我看到两个“RENDER SCENE”日志:
[info] 'RENDER SCENE', { name: 'Signin', component: [Function: Signin] } (EXPECTED)
[info] 'PUSHING TO MAIN'
[info] 'RENDER SCENE', { name: 'Signin', component: [Function: Signin] } (WHY?)
[info] 'RENDER SCENE', { name: 'Main', component: [Function: Main] }
我很好奇,如果我只推送 Main
组件,为什么 RENDER SCENE 会被调用两次(第一次是 Signin
组件)。
同样最初在 componentWillReceiveProps
方法中我只是检查:
if (nextProps.signedIn) {
nextProps.navigator.push({ name: 'Main', component: Main });
}
但这导致 Main
组件被推送两次。
最佳答案
NOTE: The GitHub link below is now deprecated, in the comments the author suggested react-native-router-flux which is by the same author.
我刚刚使用我的新组件添加了对 Redux 的支持 https://github.com/aksonov/react-native-redux-router with 使导航变得非常简单,例如调用 Actions.login
关于ios - 使用 React Native、Redux 和 Navigator 进行导航的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33056858/