ヘッダーボタン

ヘッダーの外観をカスタマイズする方法がわかったので、次はヘッダーに知性を与えましょう！実際にはそれは少し野心的すぎるかもしれません。ヘッダーが明確に定義された方法でタッチに反応できるようにしましょう。

ヘッダーにボタンを追加する

ヘッダーを操作する最も一般的な方法は、タイトルの左右にあるボタンをタップすることです。ヘッダーの右側にボタンを追加してみましょう（指やスマートフォンのサイズによっては画面全体で最も触りにくい場所の1つですが、ボタンを配置する通常の場所でもあります）。

ヘッダーボタン

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: (props) => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}

この方法でボタンを定義すると、options の this 変数は HomeScreen インスタンスでは *ありません*。そのため、setState やインスタンスメソッドを呼び出すことはできません。これは非常に重要です。ヘッダーのボタンがヘッダーが属する画面とインタラクトすることを期待するのが非常に一般的だからです。では、次にこれを行う方法を見てみましょう。

💡 正しいスタイルでヘッダーにボタンをレンダリングするためのコミュニティ開発ライブラリが利用可能です: react-navigation-header-buttons.

画面コンポーネントとのヘッダーインタラクション

場合によっては、ヘッダーのコンポーネントが画面コンポーネントとインタラクトする必要があります。このユースケースでは、navigation.setOptions を使用してオプションを更新する必要があります。画面コンポーネント内で navigation.setOptions を使用することにより、画面のプロップ、状態、コンテキストなどにアクセスできます。

ヘッダーインタラクション

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={({ navigation, route }) => ({
          headerTitle: (props) => <LogoTitle {...props} />,
          // Add a placeholder button without the `onPress` to avoid flicker
          headerRight: () => <Button title="Update count" />,
        })}
      />
    </Stack.Navigator>
  );
}

function HomeScreen({ navigation }) {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    // Use `setOptions` to update the button that we previously specified
    // Now the button includes an `onPress` handler to update the count
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount((c) => c + 1)} title="Update count" />
      ),
    });
  }, [navigation]);

  return <Text>Count: {count}</Text>;
}

ここでは、コンポーネントの状態にアクセスして更新できる onPress ハンドラを持つボタンで headerRight を更新します。

戻るボタンのカスタマイズ

createNativeStackNavigator は、プラットフォーム固有のデフォルトの戻るボタンを提供します。 iOSでは、ボタンの横にラベルが含まれており、利用可能なスペースに収まる場合は前の画面のタイトルが表示され、それ以外の場合は「戻る」と表示されます。

headerBackTitle でラベルの動作を変更し、headerBackTitleStyle でスタイルを設定できます（詳細はこちら）。

戻るボタンの画像をカスタマイズするには、headerBackImageSource を使用できます（詳細はこちら）。

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen
    name="Details"
    component={DetailsScreen}
    options={{
      headerBackTitle: 'Custom Back',
      headerBackTitleStyle: { fontSize: 30 },
    }}
  />
</Stack.Navigator>

戻るボタンのオーバーライド

戻るボタンは、ユーザーが現在の画面から戻ることができる場合は常に、スタックナビゲーターに自動的にレンダリングされます。つまり、スタックに複数の画面がある場合は常に、戻るボタンがレンダリングされます。

一般的に、これはあなたが望むものです。ただし、上記のオプションではカスタマイズできないほど戻るボタンをカスタマイズしたい場合もあるかもしれません。その場合は、headerRight で行ったのと同様に、レンダリングされるReact要素に headerLeft オプションを設定できます。あるいは、headerLeft オプションは React コンポーネントも受け入れることができます。これは、たとえば、戻るボタンの onPress 動作をオーバーライドするために使用できます。詳細はAPIリファレンスをご覧ください。

まとめ

• options の headerLeft プロパティと headerRight プロパティを使用して、ヘッダーにボタンを設定できます。
• 戻るボタンは headerLeft で完全にカスタマイズできますが、タイトルまたは画像を変更するだけの場合は、他の options があります— headerBackTitle、headerBackTitleStyle、および headerBackImageSource。
• オプションプロパティのコールバックを使用して、navigation オブジェクトと route オブジェクトにアクセスできます。