Как получить предпочтительную цветовую схему пользователя в React Native?

Опубликовано: 11 Августа, 2022

React Native — это программная среда пользовательского интерфейса с открытым исходным кодом, созданная Meta Platforms, Inc. Она используется для разработки приложений для Android, Android TV, iOS, macOS, tvOS, Интернета, Windows и UWP, позволяя разработчикам использовать платформу React вместе с со встроенными возможностями платформы.

В этой статье мы узнаем, как получить предпочтительную цветовую схему в React Native.

Создание приложения React Native:

Шаг 1: Мы будем использовать expo для создания нативного приложения для реагирования. Установите expo-cli, используя приведенную ниже команду в терминале.

npm install -g expo-cli

Шаг 2: Создайте нативный проект с помощью expo.

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 (
    <View style={styles.container}>
      <Text>GeeksforGeeks - Color Scheme React native</Text>
      <Text>{scheme}</Text>
      <Text>colorScheme:- {colorScheme}</Text>
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "center",
  },
});

Здесь мы используем функцию getColorScheme модуля внешнего вида, чтобы получить предпочтительную цветовую схему пользователя.

Запустите приложение: теперь запустите приложение, используя приведенную ниже команду в терминале.

npm run web

Выход:

JavaScript

Как получить предпочтительную цветовую схему пользователя в React Native?

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ