バージョン: 6.x

ヘッダーバーの設定

ヘッダータイトルの設定方法については既に説明しましたが、他のオプションに進む前に、もう一度確認してみましょう。反復は学習の鍵です！

ヘッダータイトルの設定

Screenコンポーネントは、さまざまな設定オプションを含むオブジェクト、またはオブジェクトを返す関数のいずれかである`options` propを受け入れます。ヘッダータイトルに使用するものは、次の例に示すように、`title`です。

ヘッダータイトル

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}

Header title

タイトルでのパラメータの使用

タイトルでパラメータを使用するには、画面の `options` prop を設定オブジェクトを返す関数にする必要があります。`options` 内で `this.props` を使用しようとすると魅力的ですが、コンポーネントがレンダリングされる前に定義されているため、`this` はコンポーネントのインスタンスを参照しないため、propsは使用できません。代わりに、`options` を関数にすると、React Navigation は `{ navigation, route }` を含むオブジェクトでそれを呼び出します。この場合、重要なのは `route` だけです。これは、画面の props に `route` prop として渡されるのと同じオブジェクトです。`route.params` を介してパラメータを取得できることを思い出してください。そのため、以下でパラメータを抽出し、タイトルとして使用します。

タイトルのパラメータ

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        options={({ route }) => ({ title: route.params.name })}
      />
    </Stack.Navigator>
  );
}

`options` 関数に渡される引数は、次のプロパティを持つオブジェクトです。

`navigation` - 画面の navigation prop です。
`route` - 画面の route prop です。

上記の例では `route` prop のみが必要でしたが、場合によっては `navigation` も使用する必要があるかもしれません。

`setOptions` を使用した `options` の更新

マウントされた画面コンポーネント自体からアクティブな画面の `options` 設定を更新する必要があることがよくあります。`navigation.setOptions` を使用してこれを行うことができます。

ナビゲーションオプションの更新

/* Inside of render() of React class */
<Button
  title="Update the title"
  onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>

ヘッダースタイルの調整

ヘッダーのスタイルをカスタマイズする際に使用する3つの主要なプロパティがあります：`headerStyle`、`headerTintColor`、および `headerTitleStyle` です。

`headerStyle`：ヘッダーをラップする `View` に適用されるスタイルオブジェクト。`backgroundColor` を設定すると、それがヘッダーの色になります。
`headerTintColor`：戻るボタンとタイトルはどちらもこのプロパティを色として使用します。以下の例では、ティントカラーを白（`#fff`）に設定しているため、戻るボタンとヘッダータイトルは白になります。
`headerTitleStyle`：タイトルの `fontFamily`、`fontWeight`、その他の `Text` スタイルプロパティをカスタマイズする場合、これを使用して行うことができます。

ヘッダースタイル

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'My home',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      />
    </Stack.Navigator>
  );
}

Custom header styles

ここで注意すべき点がいくつかあります

iOSでは、ステータスバーのテキストとアイコンは黒であり、これは濃い色の背景では見栄えがよくありません。ここでは説明しませんが、ステータスバーガイドの説明に従って、画面の色に合わせてステータスバーを設定してください。
設定した設定はホーム画面にのみ適用されます。詳細画面に移動すると、デフォルトのスタイルに戻ります。`options` を画面間で共有する方法を次に説明します。

多くの画面でヘッダーを同様の方法で設定することがよくあります。たとえば、会社のブランドカラーが赤の場合、ヘッダーの背景色を赤、ティントカラーを白にしたい場合があります。便利なことに、これらは実行中の例で使用している色であり、`DetailsScreen` に移動すると色がデフォルトに戻ることに気付くでしょう。`HomeScreen` から `DetailsScreen` に、そしてアプリで使用するすべての画面コンポーネントに `options` ヘッダースタイルプロパティをコピーする必要があるとしたら、それはひどいことではありませんか？ありがたいことに、そうする必要はありません。代わりに、`screenOptions` prop の下で設定をネイティブスタックナビゲーターに移動できます。

function StackScreen() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}

これで、`Stack.Navigator` に属する画面には、素晴らしいブランドスタイルが適用されます。しかし、必要に応じてこれらのオプションをオーバーライドする方法がきっとあるはずです。

タイトルをカスタムコンポーネントに置き換える

タイトルのテキストとスタイルを変更するだけでは不十分な場合があります。たとえば、タイトルの代わりに画像をレンダリングしたり、タイトルをボタンにしたりする場合があります。このような場合は、タイトルに使用されるコンポーネントを完全にオーバーライドして、独自のコンポーネントを提供できます。

カスタムヘッダータイトルコンポーネント

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: (props) => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

Header custom title

注記

コンポーネントを提供するときに、以前のように `title` ではなく `headerTitle` を使用する理由が気になるかもしれません。理由は、`headerTitle` はヘッダーに固有のプロパティですが、`title` はタブバー、ドロワーなどにも使用されるためです。`headerTitle` のデフォルトは、`title` を表示する `Text` コンポーネントです。

追加設定

ネイティブスタックナビゲーター内の画面で使用可能な `options` の完全なリストは、`createNativeStackNavigator` リファレンスで確認できます。

まとめ

画面コンポーネントの `options` prop 内でヘッダーをカスタマイズできます。オプションの完全なリストは、APIリファレンスを参照してください。
`options` prop は、オブジェクトまたは関数にすることができます。関数の場合は、`navigation` および `route` prop を持つオブジェクトが提供されます。
初期化時にスタックナビゲーター設定で共有 `screenOptions` を指定することもできます。prop はその設定よりも優先されます。

ヘッダータイトルの設定​

タイトルでのパラメータの使用​

`setOptions` を使用した `options` の更新​

ヘッダースタイルの調整​

画面間で共通の `options` を共有する​

タイトルをカスタムコンポーネントに置き換える​

追加設定​

まとめ​