探索React Native Dark Mode:一款优雅的切换暗黑模式解决方案
import React from 'react';
import { Text, useColorScheme } from 'react-native';
const DarkModeText = () => {
const colorScheme = useColorScheme();
return (
<Text
style={{
color: colorScheme === 'dark' ? 'white' : 'black',
}}
>
当前模式: {colorScheme === 'dark' ? '暗黑模式' : '亮模式'}
</Text>
);
};
export default DarkModeText;
这段代码使用了React Native的useColorScheme
钩子来获取当前的模式(亮或暗黑模式),并根据模式来设置Text
组件的颜色。这是一个简单而又直接的暗黑模式切换方案,适合学习和实践。
评论已关闭