React Navigation 6中能否将函数从父组件传递到子路由组件？

首先明确：不建议通过路由params直接传递函数。

React Navigation 官方设计路由params时，仅要求支持可序列化的数据（字符串、数字、布尔值、普通对象/数组这类），函数属于非序列化数据，直接传递会引发以下问题：

• 开启路由状态持久化后，函数会丢失，重启App后无法恢复
• 无法支持Deep Link跳转场景
• 可能引发意外的内存泄漏，导致组件无法被正常回收

可行替代方案 #

1. 全局状态管理 #

把需要跨组件调用的函数、关联状态存到全局状态库（Zustand、Redux、Jotai等），父组件更新全局状态/挂载方法，子路由组件直接从全局实例调用对应函数即可，这是最稳定的通用方案。

2. 利用React Navigation 内置事件机制 #

父子组件通过事件订阅/触发完成通信，不需要直接传递函数：
父组件监听自定义事件：

useEffect(() => {
  const unsubscribe = navigation.addListener('customCallParentFunc', (e) => {
    // 这里执行你原本要传递的函数，e.data可以拿到子组件传的参数
    yourFunction(e.data)
  })
  return unsubscribe
}, [navigation])

子路由组件需要调用函数时直接触发事件：

navigation.emit('customCallParentFunc', {
  // 要传给父函数的参数
  data: xxx
})

3. 子页面返回带结果回调 #

如果你的需求是子路由操作完成后给父组件返回结果，可直接用路由结果回调方案：
父组件导航时监听子页面返回结果：

useEffect(() => {
  if (route.params?.result) {
    // 拿到子页面返回的结果，执行对应逻辑
    yourFunction(route.params.result)
    // 用完记得清空参数，避免重复触发
    navigation.setParams({ result: undefined })
  }
}, [route.params?.result])

子页面完成操作后返回时传递结果：

navigation.navigate({
  name: '父页面路由名',
  params: { result: 你的返回数据 },
  merge: true
})

注意：如果你没有路由持久化、Deep Link需求，仅做临时调试的话，直接按你写的方式传函数也能临时生效，但绝对不推荐在生产环境这么用，后续迭代很容易触发隐性bug。

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