我在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; } }
<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输出看 这样就 得通过很多成了看着也觉得数据隐藏的太深了