Redux状态变更后React Navigation自动返回初始视图的问题

这种情况我之前也碰到过，大概率是导航容器被意外重新挂载或重渲染导致的，下面是几个常见原因和对应的解决办法：

• 导航容器被放在了订阅Redux状态的组件内部
  如果你的NavigationContainer是在某个依赖Redux属性的组件（比如根组件）里面渲染的，每次该Redux属性变化时，这个组件会重新渲染，进而导致NavigationContainer被重新创建——而导航容器一旦重新挂载，就会回到初始路由状态。
  解决办法：把NavigationContainer移到Redux Provider的外层，或者确保它所在的组件不会因为无关的Redux状态变化而重渲染。可以用React.memo包裹导航相关的组件，减少不必要的重渲染。

• useSelector没有正确做缓存，导致组件频繁重渲染
  如果你在根组件里用useSelector获取Redux属性时，返回的是一个新的对象/数组（比如直接返回state.someObject而没有做浅比较），每次Redux状态哪怕是无关变化，都会让useSelector返回新引用，触发组件重渲染，最终导致导航容器重置。
  解决办法：使用shallowEqual作为useSelector的第二个参数，或者手动对返回值做memoization，比如：

  import { shallowEqual, useSelector } from 'react-redux';
  
  const myProp = useSelector(state => state.myProp, shallowEqual);
  

• 把动态变化的Redux属性作为导航容器的initialRouteName
  如果你把那个会修改的Redux属性直接传给NavigationContainer的initialRouteName，每次属性变化时，导航容器会重新初始化路由，自然就回到初始状态了。
  解决办法：不要用动态值作为initialRouteName，而是通过navigation.navigate()来控制路由跳转，或者在导航初始化时一次性读取初始路由，之后不再依赖该Redux属性控制初始路由。

• Reducer中意外重置了导航相关状态
  虽然可能性较低，但可以检查一下你的Redux reducer，有没有在修改目标属性时，不小心把导航相关的状态（如果有存在Redux里的话）也重置了。如果导航状态存在Redux中，要确保reducer只修改目标属性，不影响其他状态。

内容的提问来源于stack exchange，提问作者Fernando Caride