react-navigation遇到的坑

发布时间：2020-12-15 20:29:50 所属栏目：百科来源：网络整理

导读：关于goBack返回指定页面 react-navigation 是提供了goBack()到指定页面的方法的，那就是在goBack()中添加一个参数，但当你使用 goBack(‘Main‘) 的时候，你会发现并没有跳转，原因是react-navigation默认goBack()中的参数是系统随机分配的 key ，而不是手动

关于goBack返回指定页面

react-navigation是提供了goBack()到指定页面的方法的，那就是在goBack()中添加一个参数，但当你使用goBack(‘Main‘)的时候，你会发现并没有跳转，原因是react-navigation默认goBack()中的参数是系统随机分配的key，而不是手动设置的routeName，而方法内部又没有提供可以获得key的方法，所以这里只能通过修改源码将key换成routeName了。
下面的内容直接引用了hello老文的内容

把项目/node_modules/react-navigation/src/routers/StackRouter.js文件里的 
const backRoute = state.routes.find((route: *) => route.key === action.key); 
改成 const backRoute = state.routes.find(route => route.routeName === action.key);

但不是很完美,这里的component要填想返回的组件的前一个组件的routeName,比如你的栈里顺序是home1,home2,home3,home4,在home4里要返回home2,使用this.props.navigation.goBack(‘home3‘);; 并且又会带出一个问题: goBack()方法没反应了,必须加个null进去,写成goBack(null)...

关于goBack返回指定页面的修改完善版

if (action.type === NavigationActions.BACK) {
    let backRouteIndex = null;
    if (action.key) {

      const backRoute = state.routes.find(
        /* $FlowFixMe */
        /* 修改源码 */
        route => route.routeName === action.key
        /* (route: *) => route.key === action.key */
      );
      /* $FlowFixMe */
      console.log(‘backRoute =====‘,backRoute);
      backRouteIndex = state.routes.indexOf(backRoute);
      console.log(‘backRoute =====‘,backRouteIndex);
    }
    if (backRouteIndex == null) {
      return StateUtils.pop(state);
    }
    if (backRouteIndex >= 0) {
      return {
        ...state,routes: state.routes.slice(0,backRouteIndex+1),index: backRouteIndex - 1 + 1,};
    }
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!