React Native切换state后react-navigation stack未正常更新问题

问题原因 #

1. 组件复用导致的渲染异常
   你在loadScreen函数中通过switch返回的各标签页组件（尤其是HomeStackScreen、CartStackScreen这类React Navigation栈组件）未添加唯一标识key，React的Diff算法会默认复用同类型的组件实例：当你把screen状态从Cart切换为Home时，React只会更新组件的props，不会销毁旧的CartStack实例、挂载新的HomeStack实例，所以页面仍然保留Cart栈的渲染内容，而绑定了screen状态的底部导航可以正常切换激活态。
2. 子栈路由记录未清空
   你在购物车栈中跳转到购物车子页面时，CartStack的路由栈会压入新的路由记录，就算组件触发了重渲染，只要CartStack实例没有被销毁，当前路由仍然停留在购物车子页面，也会导致显示异常。

解决方案 #

最优修复 #

给switch返回的每个组件添加唯一key，强制React在screen状态变化时销毁旧组件、挂载新组件，修改loadScreen逻辑如下：

const loadScreen = () => {
  switch (screen) {
    case "Home":
      return <HomeStackScreen key="home-stack" />;
    case "Category":
      return <CategoriesScreen key="category-stack" />;
    case "Inbox":
      return <Inbox key="inbox-stack" />;
    case "Cart":
      return <CartStackScreen key="cart-stack" />;
    case "Profile":
      return <LoginScreen key="profile-stack" />;
    default:
      return null;
  }
};

备选方案 #

如果只需要解决当前返回按钮的问题，可以在返回按钮的点击事件中先清空Cart栈的路由记录，再切换标签状态：

<TouchableOpacity
  style={styles.headerBackIcon}
  onPress={() => {
    navigation.popToTop(); // 清空当前栈的路由记录，回到Cart栈首页
    setScreen("Home");
  }}
>
  <LeftArrowSvg />
</TouchableOpacity>

长期优化建议 #

自定义底部导航嵌套React Navigation栈的方案容易出现状态不同步、性能损耗的问题，建议直接使用React Navigation官方提供的Bottom Tabs Navigator实现底部标签导航，兼容性和性能都更稳定。

内容的提问来源于stack exchange，提问作者Adil Ijaz