メインコンテンツへスキップ
バージョン: 6.x

テーマ

テーマを使用すると、React Navigationによって提供される様々なコンポーネントの色を変更できます。テーマを使用して以下のことができます。

  • ブランドに合わせて色をカスタマイズする
  • 時刻またはユーザー設定に基づいて、ライトテーマとダークテーマを提供する

基本的な使い方​

カスタムテーマを渡すには、ナビゲーションコンテナに`theme` propを渡します。

import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'rgb(255, 45, 85)',
  },
};

export default function App() {
  return (
    <NavigationContainer theme={MyTheme}>{/* content */}</NavigationContainer>
  );
}

`theme` propを動的に変更することができ、すべてのコンポーネントは新しいテーマを反映して自動的に更新されます。`theme` propを提供していない場合は、デフォルトのテーマが使用されます。

テーマは、使用する色のリストを含むJSオブジェクトです。以下のプロパティが含まれています。

  • `dark` (`boolean`): ダークテーマかライトテーマか
  • `colors` (`object`): react navigationコンポーネントで使用される様々な色
    • `primary` (`string`): アプリのプライマリカラーで、様々な要素の色付けに使用されます。通常はブランドカラーを使用します。
    • `background` (`string`): 画面の背景色など、様々な背景の色。
    • `card` (`string`): ヘッダー、タブバーなどのカードのような要素の背景色。
    • `text` (`string`): 様々な要素のテキストの色。
    • `border` (`string`): 境界線の色。例：ヘッダーの境界線、タブバーの境界線など。
    • `notification` (`string`): タブナビゲーターバッジの色。

カスタムテーマを作成する際には、これらのプロパティをすべて指定する必要があります。

テーマの例

const MyTheme = {
  dark: false,
  colors: {
    primary: 'rgb(255, 45, 85)',
    background: 'rgb(242, 242, 242)',
    card: 'rgb(255, 255, 255)',
    text: 'rgb(28, 28, 30)',
    border: 'rgb(199, 199, 204)',
    notification: 'rgb(255, 69, 58)',
  },
};

テーマを提供することで、すべての公式ナビゲーターのスタイリングが処理されます。React Navigationは、ナビゲーターのカスタマイズを支援するためのツールもいくつか提供しており、ナビゲーター内の画面もテーマを使用できます。

組み込みテーマ​

オペレーティングシステムがライトモードとダークモードの組み込みサポートを追加するにつれて、ダークモードのサポートは、トレンドに追従するというよりも、アプリの動作に対する平均的なユーザーの期待に応えることになっています。OSのデフォルトと合理的に一致する形でライトモードとダークモードのサポートを提供するために、これらのテーマはReact Navigationに組み込まれています。

デフォルトテーマとダークテーマは、次のようにインポートできます。

import { DefaultTheme, DarkTheme } from '@react-navigation/native';

オペレーティングシステムの設定を使用する​

iOS 13+とAndroid 10+では、(`useColorScheme`フック)を使用して、ユーザーが好むカラースキーム（`'dark'`または`'light'`）を取得できます。

import { useColorScheme } from 'react-native';
import {
  NavigationContainer,
  DefaultTheme,
  DarkTheme,
} from '@react-navigation/native';

export default () => {
  const scheme = useColorScheme();

  return (
    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
      {/* content */}
    </NavigationContainer>
  );
};

独自のコンポーネントで現在のテーマを使用する​

ナビゲーションコンテナ内でレンダリングされる任意のコンポーネントでテーマにアクセスするには、`useTheme`フックを使用します。テーマオブジェクトが返されます。

import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useTheme } from '@react-navigation/native';

// Black background and white text in light theme, inverted on dark theme
function MyButton() {
  const { colors } = useTheme();

  return (
    <TouchableOpacity style={{ backgroundColor: colors.card }}>
      <Text style={{ color: colors.text }}>Button!</Text>
    </TouchableOpacity>
  );
}