美文网首页React Native学习
react-navigation goBack返回指定页面

react-navigation goBack返回指定页面

作者: wangminglang | 来源:发表于2017-12-22 09:52 被阅读403次

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)

屏幕快照 2017-12-22 上午9.45.45.png
调用this.props.navigation.goBack('Home')时的action、state如图,根据action中的key和type重新配置路由后重新返回一个新的state

相关文章

网友评论

  • b7a302d2c761:我这样跳回去怎么没有动画额
    wangminglang:今天又看了下文档,this.props.navigation.navigate('xxx')这样跳转,上边那种方法不好
  • 5ec1da87f063:如何让界面回到上个界面的上个界面.

本文标题:react-navigation goBack返回指定页面

本文链接:https://www.haomeiwen.com/subject/llhtgxtx.html