React Native useColorScheme

摘要：在本教程中，您将学习如何使用 useColorScheme 钩子来获取当前用户首选的配色方案。

React Native useColorScheme 钩子的介绍

useColorScheme 钩子允许您获取当前用户首选的配色方案。

首先，从 react-native 库导入 useColorScheme 钩子

import {useColorScheme} from 'react-native';Code language: JavaScript (javascript)

然后，在您的函数组件中使用 useColorScheme 来获取当前用户首选的配色方案

const colorScheme = useColorScheme();Code language: JavaScript (javascript)

useColorScheme() 钩子返回一个字符串或 null，表示当前配色方案。它可以是以下三种值之一

• 'light'：浅色配色方案。
• 'dark'：深色配色方案。
• null：用户尚未选择配色方案。

以下示例展示了如何使用 useColorScheme 钩子在深色和浅色主题之间切换

import {useState} from 'react';
import { Text, SafeAreaView, StyleSheet, Switch, useColorScheme } from 'react-native';

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

  const [isDarkMode, setIsDarkMode] = useState(colorScheme === 'dark');

  const theme = isDarkMode ? styles.darkTheme : styles.lightTheme;

  return (
    <SafeAreaView style={[styles.container, theme.background]}>
      <Text style={[styles.text, theme.text]}>JavaScriptTutorial.Net</Text>
      <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isDarkMode ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={() => setIsDarkMode(!isDarkMode)}
        value={isDarkMode}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    marginBottom: 20,
  },
  lightTheme: {
    background: {
      backgroundColor: '#fff',
    },
    text: {
      color: '#000',
    },
  },
  darkTheme: {
    background: {
      backgroundColor: '#000',
    },
    text: {
      color: '#fff',
    },
  },
});Code language: JavaScript (javascript)

输出

工作原理。

首先，在 App 组件中调用 useColorTheme 钩子

const colorScheme = useColorScheme();Code language: JavaScript (javascript)

其次，创建一个状态变量来存储一个值，该值指示当前主题是否为深色。它默认为用户首选主题

const [isDarkMode, setIsDarkMode] = useState(colorScheme === 'dark');Code language: JavaScript (javascript)

第三，根据 isDarkMode 状态的值将样式属性（深色主题或浅色主题）分配给 theme 变量：L

const theme = isDarkMode ? styles.darkTheme : styles.lightTheme;Code language: JavaScript (javascript)

第四，根据主题是深色还是浅色在组件中使用文本和背景样式。此外，创建一个 Switch 组件来切换深色和浅色主题。

<SafeAreaView style={[styles.container, theme.background]}>
    <Text style={[styles.text, theme.text]}>JavaScript Tutorial</Text>
    <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isDarkMode ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={() => setIsDarkMode(!isDarkMode)}
        value={isDarkMode}
    />
</SafeAreaView>Code language: JavaScript (javascript)

最后，定义深色和浅色主题的样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    marginBottom: 20,
  },
  lightTheme: {
    background: {
      backgroundColor: '#fff',
    },
    text: {
      color: '#000',
    },
  },
  darkTheme: {
    background: {
      backgroundColor: '#000',
    },
    text: {
      color: '#fff',
    },
  },
});Code language: JavaScript (javascript)

摘要

• 使用 React Native 的 useColorScheme 钩子来获取当前用户首选的配色主题。