反应导航:在渲染之前设置标题颜色

Question

我正在创建一个用户可以更改主题的应用程序，我正在使用 react 导航的标头，我知道我可以通过调用setParams()来更新navigationOptions但调用它useEffect()为时已晚，它会在渲染正确颜色之前渲染标题的默认颜色。

顺便说一下，我正在使用功能状态组件。

useEffect(() => {
navigation.setParams({
backgroundColor: (theme === THEME_STANDARD) ? 'white' : Colors.appNight
});
}, [theme]);

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

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