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