ExpoReact-native：如何轻松切换我的应用程序的配色方案？

Question

我知道，当我将设备的主题从光到黑暗或从黑暗转换为光线时，应用程序的主题会发生变化。但是，我正在寻找一种简单的方法来编程相同的事情：您看到，我正在尝试实现用户可以切换以更改主题的dark模式switch；我不能做类似onChange={() => { toggleDarkMode(); }}的事情吗？

我正在从事的项目是通过运行创建的

npx create-expo-app --template

和选择

Navigation (TypeScript)

模板
    

post后20分钟后，就解决了它。您可以使用

Appearance.setColorScheme(...)

Answer 1

轻松地改变主题。

IMPORTAppearance

和

useColorScheme，从

'react-native'

声明

colorScheme

常数并提出

useColorScheme()

；剩下的唯一要做的就是使用

Appearance.setColorScheme()

来改变主题。这是最终代码：

import { Appearance, Switch, useColorScheme } from 'react-native';
//...

export default function SettingsScreen() {
  const colorScheme = useColorScheme();

  return (
    <View style={styles.container}>
      //...
      <Switch value={colorScheme=='dark'} 
          onChange={() => {
            Appearance.setColorScheme(colorScheme=='dark' ? 'light' : 'dark')
          }}/>
      //...
    </View>
  );
}