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

要素ライブラリ

React Navigation で使用される UI 要素とヘルパーを含むコンポーネントライブラリ。独自のナビゲーターを構築している場合や、アプリでデフォルトの機能を再利用したい場合に役立ちます。

インストール​

このパッケージを使用するには、@react-navigation/nativeとその依存関係 (このガイドに従ってください) があることを確認してから、@react-navigation/elements をインストールします。

npm install @react-navigation/elements

コンポーネント​

ヘッダーとして使用できるコンポーネント。これはすべてのナビゲーターでデフォルトで使用されます。

使い方

import { Header } from '@react-navigation/elements';

function MyHeader() {
  return <Header title="My app" />;
}

ナビゲーターでヘッダーを使用するには、画面オプションで header オプションを使用できます

import { Header, getHeaderTitle } from '@react-navigation/elements';

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        header: ({ options, route }) => (
          <Header {...options} title={getHeaderTitle(options, route.name)} />
        ),
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}
注

スタックナビゲーターにはアニメーションも含まれており、ネイティブスタックナビゲーターのヘッダーはネイティブプラットフォームによって提供されるため、これはスタックナビゲーターとネイティブスタックナビゲーターのヘッダーの動作を複製するものではありません。

次のプロパティを受け入れます。

headerTitle​

ヘッダーで使用する文字列または React Element を返す関数。デフォルトはシーンの title です。関数が指定された場合、allowFontScaling、tintColor、style、children プロパティを含むオブジェクトを受け取ります。children プロパティにはタイトルの文字列が含まれます。

headerTitleAlign​

ヘッダータイトルをどのように配置するか。指定できる値:

  • 左
  • 中央

デフォルトは iOS では center、Android では left です。

headerTitleAllowFontScaling​

ヘッダータイトルのフォントが、テキストサイズのアクセシビリティ設定を尊重してスケーリングされるかどうか。デフォルトは false です。

headerLeft​

ヘッダーの左側に表示する React Element を返す関数。たとえば、カスタムの左ボタンを実装するために使用できます。

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <MyButton
        {...props}
        onPress={() => {
          // Do something
        }}
      />
    ),
  }}
/>

headerRight​

ヘッダーの右側に表示する React Element を返す関数。

headerShadowVisible​

ヘッダーの標高の影 (Android) または下部ボーダー (iOS) を非表示にするかどうか。

これは、次のスタイルのショートカットです。

{
  elevation: 0,
  shadowOpacity: 0,
  borderBottomWidth: 0,
}

上記のスタイルが headerStyle で headerShadowVisible: false とともに指定されている場合、headerShadowVisible: false が優先されます。

headerStyle​

ヘッダーのスタイルオブジェクト。たとえば、ここでカスタムの背景色を指定できます。

headerTitleStyle​

タイトルコンポーネントのスタイルオブジェクト

headerLeftContainerStyle​

たとえば、パディングを追加するために headerLeft コンポーネントのコンテナのスタイルをカスタマイズします。

headerRightContainerStyle​

たとえば、パディングを追加するために headerRight コンポーネントのコンテナのスタイルをカスタマイズします。

headerTitleContainerStyle​

たとえば、パディングを追加するために headerTitle コンポーネントのコンテナのスタイルをカスタマイズします。

デフォルトでは、headerTitleContainerStyle は絶対位置スタイルで、left と right の両方をオフセットします。これにより、カスタマイズされた headerLeft を使用した場合、headerLeft と headerTitle の間に空白や重複が生じる可能性があります。これは、headerTitleContainerStyle で left と right のスタイルを調整し、headerTitleStyle で marginHorizontal を調整することで解決できます。

headerBackgroundContainerStyle​

headerBackground 要素のコンテナのスタイルオブジェクト。

headerTintColor​

ヘッダーのティントカラー

headerPressColor​

マテリアルリップル（Android >= 5.0 のみ）の色

headerPressOpacity​

ヘッダーのボタンのプレス不透明度 (Android < 5.0 および iOS)

headerTransparent​

デフォルトは false です。true の場合、headerBackground で明示的に提供しない限り、ヘッダーには背景がありません。ヘッダーは画面の上に浮き上がり、下のコンテンツと重なり合います。

これは、半透明のヘッダーやぼやけた背景をレンダリングする場合に役立ちます。

コンテンツがヘッダーの下に表示されないようにするには、コンテンツに手動で上マージンを追加する必要があることに注意してください。React Navigation は自動的にそれを行いません。

ヘッダーの高さを取得するには、HeaderHeightContext を React の Context API または useHeaderHeight と一緒に使用できます。

headerBackground​

ヘッダーの背景としてレンダリングする React Element を返す関数。これは、画像やグラデーションなどの背景を使用するのに役立ちます。

たとえば、headerTransparent とともにこれを使用して、半透明のヘッダーを作成するためにぼかしビューをレンダリングできます。

import { BlurView } from 'expo-blur';

// ...

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerTransparent: true,
    headerBackground: () => (
      <BlurView tint="light" intensity={100} style={StyleSheet.absoluteFill} />
    ),
  }}
/>;

headerStatusBarHeight​

半透明のステータスバーを考慮するためにヘッダーの上部に追加する追加のパディング。デフォルトでは、デバイスのセーフエリアインセットの最上部の値を使用します。デフォルトの動作を無効にして高さをカスタマイズするには、0 またはカスタム値を渡します。

HeaderBackground​

ヘッダーの背景で使用されるスタイル (背景色や影など) を含むコンポーネント。これは headerBackground のデフォルトです。View と同じプロパティを受け入れます。

使い方

<HeaderBackground style={{ backgroundColor: 'tomato' }} />

HeaderTitle​

ヘッダーにタイトルのテキストを表示するために使用されるコンポーネント。これは headerTitle のデフォルトです。Text と同じプロパティを受け入れます。

タイトルの色は、デフォルトでテーマのテキストカラーになります。tintColor プロパティを渡すことでオーバーライドできます。

使い方

<HeaderTitle>Hello</HeaderTitle>

HeaderBackButton​

ヘッダーの戻るボタンを表示するために使用されるコンポーネント。これは スタックナビゲーターのheaderLeft のデフォルトです。次のプロパティを受け入れます

  • disabled - ボタンを無効にするかどうかを制御するブール値。
  • onPress - ボタンが押されたときに呼び出すコールバック。
  • pressColor - マテリアルリップル（Android >= 5.0 のみ）の色。
  • backImage - ヘッダーの戻るボタンにカスタム画像を表示するために React Element を返す関数。
  • tintColor - ヘッダーのティントカラー。
  • label - ボタンのラベルテキスト。通常は前の画面のタイトル。デフォルトでは、これは iOS でのみ表示されます。
  • truncatedLabel - 完全なラベルを表示するのに十分なスペースがない場合に表示するラベルテキスト。
  • labelVisible - ラベルテキストが表示されるかどうか。デフォルトは iOS では true、Android では false です。
  • labelStyle - ラベルのスタイルオブジェクト。
  • allowFontScaling - ラベルフォントが、テキストサイズのアクセシビリティ設定を尊重してスケーリングされるかどうか。
  • onLabelLayout - ラベルのサイズが変更されたときにトリガーされるコールバック。
  • screenLayout - 画面のレイアウト。
  • titleLayout - ヘッダー内のタイトル要素のレイアウト。
  • canGoBack - スタック内で戻る操作が可能かどうかを示すブール値。
  • accessibilityLabel - スクリーンリーダー用のボタンのアクセシビリティラベル。
  • testID - テストでこのボタンを特定するためのID。
  • style - ボタンのスタイルオブジェクト。

使い方

<HeaderBackButton label="Hello" onPress={() => console.log('back pressed')} />

MissingIcon​

アイコンが見つからないことを示すフォールバックとして使用できる、欠落アイコンの記号を表示するコンポーネント。以下のpropsを受け付けます。

  • color - アイコンの色。
  • size - アイコンのサイズ。
  • style - アイコンの追加スタイル。

PlatformPressable​

Pressable の上に抽象化を提供し、プラットフォームの違いを処理するコンポーネント。Pressableのpropsに加えて、以下の追加のpropsを受け付けます。

  • pressColor - Androidで押されたときのマテリアルリップルの色
  • pressOpacity - プラットフォームがマテリアルリップルをサポートしていない場合に押されたときの不透明度

ResourceSavingView​

removeClippedSubviews を利用して、非アクティブな画面のパフォーマンスを向上させるのに役立つコンポーネント。画面をクリップする必要があるかどうかを示すvisible propを受け入れます。

使い方

<ResourceSavingView visible={0}>{/* Content */}</ResourceSavingView>

ユーティリティ​

SafeAreaProviderCompat​

`react-native-safe-area-context の SafeAreaProvider コンポーネントのラッパーで、初期値が含まれています。

使い方

<SafeAreaProviderCompat>{/* Your components */}</SafeAreaProviderCompat>

HeaderBackContext​

親画面の戻るタイトルを取得するために使用できるReactコンテキスト。

import { HeaderBackContext } from '@react-navigation/elements';

// ...

<HeaderBackContext.Consumer>
  {(headerBack) => {
    if (headerBack) {
      const backTitle = headerBack.title;

      /* render something */
    }

    /* render something */
  }}
</HeaderBackContext.Consumer>;

HeaderShownContext​

親画面でヘッダーが表示されているかどうかを確認するために使用できるReactコンテキスト。

import { HeaderShownContext } from '@react-navigation/elements';

// ...

<HeaderShownContext.Consumer>
  {(headerShown) => {
    /* render something */
  }}
</HeaderShownContext.Consumer>;

HeaderHeightContext​

親画面で最も近い表示されているヘッダーの高さを取得するために使用できるReactコンテキスト。

import { HeaderHeightContext } from '@react-navigation/elements';

// ...

<HeaderHeightContext.Consumer>
  {(headerHeight) => {
    /* render something */
  }}
</HeaderHeightContext.Consumer>;

useHeaderHeight​

親画面で最も近い表示されているヘッダーの高さを返すフック。

import { useHeaderHeight } from '@react-navigation/elements';

// ...

const headerHeight = useHeaderHeight();

getDefaultHeaderHeight​

デフォルトのヘッダーの高さを返すヘルパー。次のパラメータを取ります。

  • layout - 画面のレイアウト。heightとwidthプロパティを含むオブジェクトです。
  • statusBarHeight - ステータスバーの高さ

getHeaderTitle​

ヘッダーで使用するタイトルテキストを返すヘルパー。次のパラメータを取ります。

  • options - 画面のオプションオブジェクト。
  • fallback - オプションでタイトルが見つからなかった場合のフォールバックタイトル文字列。