在React Native的Stack Navigator中添加if语句实现聊天页按来源返回

你的if判断无法触发的核心原因是路由参数的获取对象错误：

• 你当前在父组件MainTabScreen中读取的route.params，是Tab导航组件本身的入参，不是ChatScreen页面的路由参数
• 你从NextScreen、OtherScreen传递给ChatScreen的标记参数，只会存在于ChatScreen自己的路由属性中，父组件MainTabScreen默认拿不到，所以判断条件永远为假

React Navigation的页面options支持写成函数形式，可直接接收当前页面的navigation和route参数，直接修改ChatScreen的配置即可：

// 删除MainTabScreen中定义的didComeFromNextScreen、didComeFromOtherScreen、chatChecker三个多余函数
// 修改ChatScreen的Screen配置如下
<MainTab.Screen 
  name = "ChatScreen" 
  component={ChatScreen} 
  // options写成函数形式，直接拿到当前ChatScreen的route、navigation
  options={({ navigation, route }) => ({
    title: '' ,
    headerTintColor: '#fff',
    headerLeft: ()=>(
      <Icon.Button 
        name = "arrow-left" 
        size={25} 
        backgroundColor= "#fff" 
        onPress={()=>{
          if(route.params?.didComeFromNextScreen){
            console.log('It came from NextScreen')
            navigation.navigate('NextScreen')
            return
          }
          if(route.params?.didComeFromOtherScreen){
            console.log('It came from OtherScreen')
            navigation.navigate('OtherScreen')
            return
          }
          // 兜底逻辑，没有匹配到来源时默认返回上一页
          navigation.goBack()
        }}
      />          
    )
  })}
/>

另外你当前OtherScreen的headerRight代码缺少Icon.Button标签，会触发语法报错，补充完整即可：

<MainTab.Screen name = "OtherScreen" component={OtherScreen} options= {{
  title: '' ,
  headerTintColor: '#fff',
  headerLeft: null,
  headerRight: () => (
    <Icon.Button 
      name = "message" 
      size={25} 
      backgroundColor= "#fff" 
      onPress={ () => navigation.navigate('ChatScreen',{
        didComeFromOtherScreen: true
      })}> 
    </Icon.Button>
  )
}}/>

如果需要调试参数是否传递正确，可以直接在ChatScreen组件内部打印参数验证：

// ChatScreen组件内添加
useEffect(() => {
  console.log('聊天页接收的参数：', route.params)
}, [route.params])

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