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 を返します。次の 3 つの値のいずれかになります。

• '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)

3 番目に、isDarkMode 状態の値に基づいて、テーマ変数にスタイルプロパティ（ダークテーマまたはライトテーマ）を割り当てます。

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

4 番目に、テーマがダークかライトかに基づいて、コンポーネントでテキストと背景のスタイルを使用します。さらに、ダークテーマとライトテーマを切り替えるための スイッチ コンポーネントを作成します。

<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 フックを使用して、ユーザーが設定したカラースキームを取得します。