React Native Appearance.addChangeListener() 什么都不做

Question

我正在编写我的第一个 react-native 应用程序，并且想像 GMail 一样切换主题。
确实，当我们在手机设置中更改主题模式或在夜间设置自动深色主题时，GMail 的颜色会变深。
所以我尝试按照doc 中的说明实现Appearance.addChangeListener，但不幸的是该功能不起作用。

我正在尝试使用 Android 10。

我如何在不重新启动应用程序的情况下在手机主题更改时更新应用程序的颜色？

useEffect(() => {
    dispatch(changeTheme(Appearance.getColorScheme()));
    Appearance.addChangeListener(onThemeChange);

    return () => Appearance.removeChangeListener(onThemeChange);
}, []);

// This function is never call
const onThemeChange = ({ colorScheme }) => {
    console.log("onThemeChange", colorScheme)
    dispatch(changeTheme(colorScheme));
}

Answer 1

我通过将此代码添加到 MainActivity.java 解决了这个问题：

import android.content.res.Configuration;
    
@Override
public void onConfigurationChanged(Configuration newConfig) {
  super.onConfigurationChanged(newConfig);
  getReactInstanceManager().onConfigurationChanged(this, newConfig);
}

为了测试此功能，您可以在 Android 10 及更高版本中打开/关闭 DarkTheme。

Answer 2

使用颜色方案

你可以使用useColorScheme，它会自动更新。

第一

import {useColorScheme} from 'react-native;

那么，在你的功能组件中

const colorScheme = useColorScheme();

我还建议编写自己的自定义钩子来更新 colorScheme 上的 StatusBar 和 NavigationBar 更改