React-Native-Navigation如何在渲染/导航前动态设置头部标题

最优解决方案（无延迟、无警告、代码最简） #

你完全不需要在DayScreen内部手动设置标题，直接在路由定义层读取参数设置即可，这是React Navigation官方推荐的标准写法：

1. 找到你定义路由栈的代码，修改DayScreen对应的Stack.Screen配置：

<Stack.Screen 
  name="DayScreen" 
  component={DayScreen}
  // 直接从路由参数中读取name作为标题
  options={({ route }) => ({ title: route.params.name })}
/>

2. 你现有的跳转逻辑完全不用改，DayScreen内部也可以删掉设置标题和存储名称state的相关代码，不会再出现标题更新延迟，也不会触发警告。

备选方案（如需在组件内部动态修改标题时使用） #

如果你确实需要在DayScreen内部根据业务逻辑动态调整标题，把设置标题的逻辑放到useEffect副作用回调中即可，避免在渲染流程中直接跨组件更新状态：

// DayScreen 内部代码
const name = props.route.params.name;

useEffect(() => {
  props.navigation.setOptions({ title: name });
}, [name, props.navigation]);

原写法报错原因 #

你之前直接把props.navigation.setOptions写在函数组件的顶层，这部分代码属于渲染流程的一部分，执行时直接触发导航组件的状态更新，相当于打断当前组件的渲染流程修改其他组件状态，不符合React的渲染规则，因此会抛出Cannot update a component from inside the function body of a different component警告。

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