react-navigation之TabNavigator, StackNavigator使用配合redux

清风笑～

已于 2022-11-15 10:26:50 修改

阅读量4.9k

点赞数 1

分类专栏： js前端 react react-native，react 文章标签： react.js javascript 前端

于 2017-07-09 17:21:53 首次发布

本文链接：https://blog.csdn.net/ling369523246/article/details/74888198

版权

本文介绍了在React-Navigation中如何结合Redux使用TabNavigator和StackNavigator。遇到的问题是错误提示‘there is no route defined for key *** must be one of’。解决方法是确保在navReducer配置中不包含TabNavigator的route，而应直接提供StackNavigator。使用Redux的好处在于可以方便地在页面切换时dispatch动作，并直接传递参数给下一个页面，特别是在处理WebView场景时，能更直观地通过state获取webview所需的参数。

摘要由CSDN通过智能技术生成

我在react-navigation的组件StackNavigator 和TabNavigator组合使用在加上redux，出现如下问题

there is no route defined for key ***must be one of

这个类似的在 react-navigation的github也有，StackNavigator里嵌套一个TabNavigator，

navreducer传递 AppNavigations就放入 <Provider>中 render 出来显示了

const AppNavigations = ({ dispatch, nav }) => {
	return <Navigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
}
  
const mapStateToProps = state => ({
  nav: state.navreducer,
});

module.exports = connect(mapStateToProps)(AppNavigations);

combineReducers 里还需要配置navReducer