如何在 React Native 中获得用户首选的配色方案？

React Native 是由 Meta Platforms, Inc 创建的开源 UI 软件框架。它用于开发适用于 Android、Android TV、iOS、macOS、tvOS、Web、Windows 和 UWP 的应用程序，使开发人员能够同时使用 React 框架具有本机平台功能。

在本文中，我们将学习如何在 React Native 中获得用户喜欢的配色方案。

创建 React Native 应用程序：

第 1 步：我们将使用 expo 创建 React Native 应用程序。在终端中使用以下命令安装 expo-cli。

npm install -g expo-cli

第 2 步：使用 expo 创建一个 React Native 项目。

expo init "gfg"

第 3 步：现在使用以下命令转到创建的项目。

cd "gfg"

项目结构：它将如下所示。

第 4 步：获取用户首选配色方案：我们将使用 react-native 的外观模块来确定用户的首选配色方案。为此，在App.js文件中添加以下代码。

Javascript

import { StyleSheet, Text, View, Appearance,
    useColorScheme} from 'react-native';
import React, {useState , useEffect} from 'react'
  
export default function App() {
  
  const [scheme, setScheme] = useState('')
  const colorScheme = useColorScheme();
  
  useEffect(()=>{
    const userDeviceColor = Appearance.getColorScheme();
    if (userDeviceColor === 'dark') {
      setScheme('Dark Scheme')
    }else if (userDeviceColor === 'light'){
      setScheme('Light Scheme')
    }
    return
  
  })
  
  return (
    
      GeeksforGeeks - Color Scheme React native
      {scheme}
      colorScheme:- {colorScheme}
    
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这里我们使用外观模块的 getColorScheme函数来获取用户的首选配色方案。

运行应用程序：现在在终端中使用以下命令运行应用程序。

npm run web

输出：