使用嵌套导航器时route.params处理是否正确及重复弹窗问题求解

问题根源 #

React Navigation的路由参数会持久化保存在对应路由的实例上，你的错误操作本质是参数修改的目标对象错误：

• 第一次从FinishingScreen跳转到Home时，你给Home路由设置了didComeFromFinishingScreen: true，只要Home路由没有被销毁，这个参数会一直保留
• 从Home跳转到Drawer内页面时传递的didComeFromFinishingScreen: false是传给目标页面（比如ProfileStackScreen）的，完全不会修改Home路由的参数
• 从Drawer页面点击跳转回Home时，如果目标路由名称和已有的Home路由实例名称不匹配，也无法覆盖原有参数

解决方案 #

最简单的修复方式是在模态框触发后立刻重置当前Home路由的对应参数，避免参数持久化导致重复触发：
修改HomeScreen的校验逻辑如下：

if(route.params?.didComeFromFinishingScreen && isFocused){
  setModalVisible(true)
  // 弹出模态框后立刻重置参数，下次进入不会重复触发
  navigation.setParams({
    didComeFromFinishingScreen: false
  })
}

可选优化方案 #

如果要进一步避免参数残留问题，可以把触发逻辑放到focus监听事件里，每次页面聚焦时做一次判断，判断后直接清空参数：

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    if(route.params?.didComeFromFinishingScreen){
      setModalVisible(true)
      navigation.setParams({ didComeFromFinishingScreen: false })
    }
  })
  return unsubscribe
}, [navigation, route.params])

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