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

我遇到了相同的问题，并用代码bellow解决了：

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

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

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

Answer 2

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

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

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