React Navigation v5：用于标题屏幕交互的 useEffect()？答案

【问题标题】：React Navigation v5: useEffect() for header screen interaction?React Navigation v5：用于标题屏幕交互的 useEffect()？
【发布时间】：2020-10-14 18:59:47
【问题描述】：

根据docs，我们应该使用useLayoutEffect() 进行标题屏幕交互。我想通过 useEffect() 钩子达到同样的效果，下面的方法是否正确？

const [flag, setFlag] = useState(false);

  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button
          onPress={() => {
            console.log("Header", flag);
          }}
          title="Update count"
        />
      ),
    });
  }, [flag]);

另外，使用navigation.setOptions() 应该改变导航属性，但是docs 中的useLayoutEffect() 和dependecy [navigation] 如何防止进入无限循环？

【问题讨论】：

它在哪里说“使用 navigation.setOptions() 会改变导航道具”？
@satya164 更新问题。我想知道为什么navigation prop不改变也不进入无限循环
@satya164 请看stackoverflow.com/q/57019318/10117360

标签： react-native react-navigation react-navigation-v5

【解决方案1】：

另外，使用 navigation.setOptions() 应该改变导航属性

setOptions 没有理由更改 navigation 属性。 navigation 对象不包含任何选项，更新选项不会更改导航对象中的任何内容。

【讨论】：