React Native - 如何根据深色模式和浅色模式重新加载颜色

Question

我们一直在尝试在一个旧项目中实现暗模式，我们在一个单独的文件中定义了一些颜色，并在整个应用程序中使用，如下所述

import {Appearance} from "react-native";

const isDarkMode = (Appearance.getColorScheme() === 'dark')

const Color = {
    WHITE: '#FFFFFF',
    TRANSPARENT: 'transparent',
    THEMECOLOR: isDarkMode ? '#1A252F' : '#25A31D',
    THEMEBLACK: isDarkMode ? '#121B24' : '#252525',
    THEMEDARKGREEN: isDarkMode ? '#2F3F4D' : '#407F2C',
    THEMEWHITE: isDarkMode ? '#121B24' : '#FFFFFF',
    TXTGREETING: isDarkMode ? '#898989' : 'rgba(0, 0, 0, .5)',
    TXTWHITE: isDarkMode ? '#8A8A8A' : '#FFFFFF',
    TXTTHEME: isDarkMode ? '#676C69' : '#25A31D',
    TXTGREY: isDarkMode ? '#676C69' : '#9E9E9E',
    TXTDARKGREY: isDarkMode ? '#505050' : '#9E9E9E',
    TXTBLACK: isDarkMode ? '#676c69' : '#252525',
}

export default { Color };

如下图所示使用

import appColors from "common/colors";

export default StyleSheet.create({
    container:{
        flex:1,
        backgroundColor: appColors.Color.THEMECOLOR,
    }
});

我们没有任何内部功能可以在应用程序内切换到暗模式，但如果从设备设置更改它应该可以工作，这确实有效，但需要终止应用程序并重新启动。

虽然我们尝试在NavigationContainer中注入主题，但在应用程序运行时它不起作用

import { NavigationContainer,DarkTheme,DefaultTheme } from "@react-navigation/native";
render() {
    return (
      <NavigationContainer theme={isDarkMode?DarkTheme:DefaultTheme}>
        <RootStackScreen screenProps={this.props} />
      </NavigationContainer>
    )
}

当应用程序正在运行并且从设备设置更改暗模式时，如何实现这一点？

感谢您的任何指示。

Answer 1

我有同样的问题并用下面的代码解决它：

const [colorScheme,setColorScheme] = useState(() => Appearance.getColorScheme());

const handleColorScheme = useCallback((theme) => {
  setColorScheme(theme.colorScheme);
}, []);

useEffect(() => {
  Appearance.addChangeListener(handleColorScheme);
  return () => {
    Appearance.removeChangeListener(handleColorScheme);
  };
}, [handleColorScheme]);

Answer 2

亚瑟的做法是正确的。 您还可以为手动切换做些什么，添加一个按钮，将“light”和“dark”写入异步存储，然后读取值并在渲染之前加载它。

至少，这就是我正在做的！ 因此，即使是手动按钮也可以肯定。 我这样做了，因为我们的用户群中有很大一部分使用的是旧手机。

通常，Arthurs 代码位于其中包含导航堆栈的文件中。 如果您有单页应用程序，则应在主屏幕上加载它。