时间戳

首页 > 解决方案 > 在 Bare React Native 项目中启用深色主题

react-native - 在 Bare React Native 项目中启用深色主题

问题描述

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

标签： react-nativethemes

解决方案

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

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>
)
}

推荐阅读