React Native 之 主题偏好（十一）

如果你的 React Native 版本较新，它提供一个主题API useColorScheme，你可以直接使用它。如果不是，需安装额外的库，如react-native-appearance。

下面是一个使用 react-native-appearance（或 useColorScheme）的简单示例：

使用 react-native-appearance

需要安装 react-native-appearance（如果它还不是 React Native 的一部分）。

npm install react-native-appearance  
# 或者  
yarn add react-native-appearance

然后，你可以在你的组件中使用它：

import React, { useEffect, useState } from 'react';  
import { Text, View } from 'react-native';  
import { useColorScheme } from 'react-native-appearance';  
  
const DynamicThemeComponent = () => {  
  // 使用 useColorScheme Hook 获取当前颜色方案  
  const colorScheme = useColorScheme();  
  
  // 根据颜色方案设置主题  
  const theme = colorScheme === 'dark' ? 'darkTheme' : 'lightTheme';  
  
  // 这里可以根据 theme 变量来设置组件的样式  
  // 但为了简化示例，我们直接在文本中显示当前的颜色方案  
  
  return (  
    <View>  
      <Text>当前颜色方案: {colorScheme}</Text>  
      {/* 这里可以添加更多的组件，并使用 theme 变量来设置它们的样式 */}  
    </View>  
  );  
};  
  
export default DynamicThemeComponent;

使用 useColorScheme（内置于 React Native）

如果你的 React Native 版本较新，并且 useColorScheme 已经内置，你可以直接使用它，而无需安装额外的库：

import React from 'react';  
import { Text, View, useColorScheme } from 'react-native';  
  
const DynamicThemeComponent = () => {  
  // 使用 useColorScheme Hook 获取当前颜色方案  
  const colorScheme = useColorScheme();  
  
  // 根据颜色方案设置组件的样式  
  const textColor = colorScheme === 'dark' ? 'white' : 'black';  
  const backgroundColor = colorScheme === 'dark' ? 'black' : 'white';  
  
  return (  
    <View style={{ backgroundColor }}>  
      <Text style={{ color: textColor }}>当前颜色方案: {colorScheme}</Text>  
      {/* 其他组件 */}  
    </View>  
  );  
};  
  
export default DynamicThemeComponent;