react-navigation goBack返回指定页面

重新看了下文档


屏幕快照 2018-09-12 下午2.33.39.png

所以只需要this.props.navigation.navigate('xxx')这样就可以了,下边方法没用了

1.问题
react-navigation设置导航后,调用this.props.navigation.goBack('xxx')返回指定页面无效

2.解决

const AppNavigator = StackNavigator({
    Home: {screen: Home},
    ShopDetail: {screen: ShopDetail}
});

const defaultGetStateForAction = AppNavigator.router.getStateForAction;
AppNavigator.router.getStateForAction = (action, state) => {
    // goBack返回指定页面
    if (state && action.type === 'Navigation/BACK' && action.key) {
        const backRoute = state.routes.find((route) => route.routeName === action.key);
        if (backRoute) {
            const backRouteIndex = state.routes.indexOf(backRoute);
            const purposeState = {
                ...state,
                routes: state.routes.slice(0, backRouteIndex + 1),
                index: backRouteIndex,
            };
            return purposeState;
        }
    }
    return defaultGetStateForAction(action, state)
};

3.分析
拦截路由的getStateForAction(action, state)

react-navigation goBack返回指定页面_第1张图片
屏幕快照 2017-12-22 上午9.45.45.png

调用 this.props.navigation.goBack('Home')时的action、state如图,根据action中的key和type重新配置路由后重新返回一个新的state

你可能感兴趣的:(react-navigation goBack返回指定页面)