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

简介: 我在react-navigation的组件StackNavigator 和TabNavigator组合使用在加上redux,出现如下问题there is no route defined ...

我在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

const allReducers = combineReducers({

	nav: navreducers,
});


那么navreducers的配置就是重点了, 不注意 就把TabNavigator里面的route 配置进去了

export const nav = (state, action) => {

    switch (action.type) {
         //TabNavigator 里模块
        case '****':
            return Navigator.router.getStateForAction(
                NavigationActions.navigate({ routeName: 'Tabchild' }),
                state
            );
        case '**':
        //TabNavigator 里模块
            return Navigator.router.getStateForAction(
                NavigationActions.navigate({ routeName: 'Tabchild' }),
                state
            );
        case 'WebDetail':
            return Navigator.router.getStateForAction(
                NavigationActions.navigate({ routeName: 'WebDetail' }), {...state, webViewURL: action.webViewURL }
            );
        default:
            return Navigator.router.getStateForAction(action, state) || state;

    }
}
上面做是不对的, 这样做了就报出上面的错误,正确如下,因为我们在给provider 里提供的就是StackNavigator,这样就对应了

export const navreducer = (state, action) => {
    switch (action.type) {
        case 'WebDetail':
            return Navigator.router.getStateForAction(
                NavigationActions.navigate({ routeName: 'WebDetail' }), 
                {...state, webViewURL: action.webViewURL }
            );
        default:
            return Navigator.router.getStateForAction(action, state) || state;
    }
}


加上redux的好处,比如,在切换页面时 就可以直接 dispatch 切换转跳页面了, 不然换个 同时吧 参数webURl传递给下一个将要展示的页面 
<TouchableOpacity onPress={()=> {
						
			this.props.navigation.dispatch({ 
				type: 'WebDetail', webViewURL: data.alt 
							});
						}}>
</TouchableOpacity>

webview 需要的参数通过state就能获取到

class WebView extends Component {
	render() {
		return <WebView source={{uri: this.props.url}}/>
	}
}


function mapStateToProps(state) {
	return {
		url: state.navreducer.webViewURL
	}
}

当然可以用其他的办法用 navigate 方法切换 传递webViewURL

	<TouchableOpacity onPress={()=> {
		this.props.navigation.navigate('WebDetail', webViewURL);
						}}>
				
	</TouchableOpacity>

在 mapStateToProps输出看 这样就 得通过很多成了看着也觉得数据隐藏的太深了







相关文章
|
1月前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
85 0
|
27天前
|
存储 JavaScript 前端开发
基于React和Redux的待办事项列表应用
基于React和Redux的待办事项列表应用
31 0
|
27天前
|
JavaScript 前端开发 搜索推荐
构建一个基于React和Redux的简易电商购物车应用
构建一个基于React和Redux的简易电商购物车应用
26 0
|
27天前
|
JavaScript 前端开发
构建一个基于React和Redux的Todo应用
构建一个基于React和Redux的Todo应用
24 0
|
27天前
|
JavaScript 前端开发 测试技术
构建一个使用React和Redux的简单在线书店应用。
构建一个使用React和Redux的简单在线书店应用。
22 0
|
27天前
|
存储 JavaScript 前端开发
使用React和Redux构建一个简单的待办事项应用
使用React和Redux构建一个简单的待办事项应用
17 0
|
27天前
|
存储 JavaScript 前端开发
利用React和Redux构建高效的数据驱动Web应用
利用React和Redux构建高效的数据驱动Web应用
19 0
|
1月前
|
存储 JavaScript 前端开发
React中的Redux:简介和实例代码
React中的Redux:简介和实例代码
36 1
|
1月前
|
开发框架 前端开发 JavaScript
使用React、Redux和Bootstrap构建社交媒体应用
使用React、Redux和Bootstrap构建社交媒体应用
26 0
|
1月前
|
JavaScript 前端开发
React结合Redux实现Todolist
React结合Redux实现Todolist
23 0