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 代碼位於其中包含導航堆棧的文件中。 如果您有單頁應用程序，則應在主屏幕上加載它。