react nativeのheaderにボタンを設置する ～Screenのoptionのいじり方

概要

• BottomTabやStackのScreenのoptionでheaderLeft, Rightにreact Nodeを置ける。
• navigation.setOptionsを使えばcomponent上で設定することもできる。

公式ドキュメント

Stackの場合の例

const Stack = createStackNavigator

<Stack.Navigator>
  <Stack.Screen
    name='Hoge'
    component={HogeScreen}
    options={{
      headerRight: () => (ここにReact Nodeを入れられる)
    }}
  >
</Stack.Navigator>

BottomTabもStackの部分が変わるだけで同じように作れる。

navigationを使いたい場合

ここではnavigationとroutesを使える。

options={({navigation, route}) => {
  headerRight: () => (ここにReact Nodeを入れられる&naigation, routeも使える)
}}

component上で設定したい場合

component上で作っているonPressのfunctionだったり、component上の変数をheaderのボタンから操作したい場合もあるかと思います。
その場合はnavigator.setOptionsというものが使えます。

const YourScreen = ({navigation}) => {
  useEffect(() => {
    navigation.setOptions({ここにoptionsを入れられる})
  }, [])

  return ...
}

のようにすればマウント時にheaderのButtonを設定したりできますし、もちろん他のイベント時に使うこともできます。

例えばヘッダー上の「編集ボタン」を押すと、ヘッダーとスクリーンの表示が切り替わる機能なんかはよく見かけますが、そのような機能の作成時に有効です。