反应导航：渲染前设置标题颜色

Question

我正在创建一个应用程序，用户可以在其中更改主题，使用的是反应导航的标题，并且我知道可以通过调用navigationOptions来更新setParams()，但可以在{{1}上对其进行调用}为时已晚，它将在呈现正确颜色之前呈现标题的默认颜色。

我正在使用功能状态组件。

useEffect()

以上是我目前使用的代码，当我单击更改主题的按钮时，它会自动更新标题颜色，但是当我导航至此屏幕时，它会显示默认颜色，然后显示正确的主题颜色。你们对如何做到这一点有任何想法吗？感谢您的任何帮助！

Answer 1

useLayoutEffect可能正是您想要的，它会在浏览器绘制到屏幕之前运行代码。

useLayoutEffect(() => {
  navigation.setParams({
    backgroundColor: theme === THEME_STANDARD ? 'white' : Colors.appNight
  });
}, [theme]); // or empty dependency array if you only want it to run when the component mounts