在纯 React Native 项目中启用深色主题

Question

如果您使用 expo 制作项目，app.json 文件中有一个选项，userInterfaceStyle: "dark" 可以为项目启用深色模式。这如何在一个裸 React Native 项目中实现？在 React Native 的文档中，他们提到了 useColorScheme() hook 的使用，但我不明白如何在我的项目中使用 hook 实现深色主题。

Answer 1

配色方案用于检查设备的当前主题。

const Colors = () => {
const isDark = useColorScheme() == 'dark';
return {
   background:isDark ? 'black':'white',
   text:isDark ? 'white':'black'
  }
}
export default Colors;

例子

import Colors from './Colors';

const Home = ()=>{
 const colors = Colors();
return (
   <View style={{flex:1,backgroundColor:colors.background}}>
      <Text style={{color:colors.text}}>hello world</Text>
   </View>
)
}

在纯 React Native 项目中启用深色主题

Enable Dark Theme in a Bare React Native Project

themes

react-native