【ReactNative】ヘッダーボタン

ヘッダーボタンの付け方は２通りあります。

reactnavigation.org

Screen内でつける

スクリーン内の情報を使った処理ができます。 こちらのほうが使いやすいパターンが多いのではないでしょうか。

const TakePhotoScreen = ({ navigation }) => {

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <Button title="キャンセル" onPress={() => navigation.goBack()} />
      ),
      headerRight: () => (
        <Button title="完了" onPress={() => navigation.navigate('Main') } />
      ),
    });
  });

Navigatorの宣言時につける

スクリーン内の情報にアクセスできなさそうです。

    <PhotoStack.Navigator>
      <PhotoStack.Screen
        name="TakePhoto"
        component={TakePhotoScreen}
        options={({ navigation }) => ({
          headerLeft: () => (
            <Button title="キャンセル" onPress={() => navigation.goBack()} />
          ),
          headerRight: () => (
            <Button title="完了" onPress={() => navigation.navigate('Main') } />
          ),
        })}
      />
    </PhotoStack.Navigator>