React Native Navigator如何删除路由栈？实现[A,F]结构且不切换焦点

嘿，刚好我对React Native 0.39.x版本的Navigator组件还有印象，给你分享个能完美解决这个问题的方案——在F页面的componentDidMount后台完成路由栈修改，完全不会出现屏幕焦点切换的问题，而且不用升级版本。

核心思路 #

React Native 0.39.2的Navigator组件自带了replaceRoutes方法，这个方法可以直接替换整个路由栈，并且默认不会触发页面切换动画，刚好匹配你后台修改的需求。我们只需要构造出目标路由栈[A, F]，然后调用这个方法就能实现效果。

具体步骤 #

1. 跳转F页面时携带A的路由信息
   从E页面跳转到F的时候，把根页面A的路由对象传递给F，这样F就能准确构造出目标栈。代码示例：

   // 在E页面的跳转逻辑中
   this.props.navigator.push({
     routeName: 'F',
     params: {
       // 获取路由栈中的第一个元素（也就是A的路由对象）
       rootARoute: this.props.navigator.getCurrentRoutes()[0]
     }
   });
   

2. 在F页面的componentDidMount中修改路由栈
   进入F页面后，在componentDidMount生命周期里，拿到传递过来的A路由对象，结合当前F的路由对象构造出新的路由栈，最后调用replaceRoutes完成替换：

   componentDidMount() {
     const { navigator, route } = this.props;
     const { rootARoute } = route.params;
   
     // 构造目标路由栈：[A, F]
     const targetRoutes = [rootARoute, route];
   
     // 替换整个路由栈，关闭动画避免屏幕切换
     navigator.replaceRoutes(targetRoutes, {
       animated: false
     });
   }
   

备选方案（如果无法传递A的路由对象） #

如果因为某些原因没法在跳转时传递A的路由对象，你也可以在F页面手动构造A的路由对象，只要保证routeName和A页面的注册名称一致，并且params和初始渲染A时的参数相同即可：

componentDidMount() {
  const { navigator, route } = this.props;

  // 手动构造A的路由对象
  const rootARoute = {
    routeName: 'A', // 必须和A页面注册的routeName一致
    params: { /* 这里填写A页面需要的参数，和初始打开时一致 */ }
  };

  const targetRoutes = [rootARoute, route];
  navigator.replaceRoutes(targetRoutes, { animated: false });
}

注意事项 #

• 确认你的React Native 0.39.2版本支持replaceRoutes方法——这个方法在0.3x版本的Navigator中是原生支持的，专门用于直接替换整个路由栈，不会触发页面跳转的动画效果。
• 确保构造的A路由对象参数正确，否则A页面重新渲染时可能出现状态异常。

内容的提问来源于stack exchange，提问作者Wahyu Arzan