【React Native】React Navigationでヘッダーに画像を設定したい

こんにちは！！

今回はRaect NativeのReact Navigationでヘッダーに画像を設定する方法について、お伝えしたいと思います。

この方法はReact Navigation の公式ドキュメントには書いてなかったので、ちょっとハマりました（笑）

もし、他にもっと良い方法があれば、ご連絡いただけると嬉しいです。

以下の環境で実装しました。

ヘッダーに画像を設定するにはnaviagtion.setOptionsを使う

ご存知かと思いますが、React Natvigationでは各Screenコンポーネントではpropsとしてnavigationが渡されます。

そのnavigation のsetOptions関数を使うことで、ヘッダーの設定を変更できます。

今回の場合、headerTitleを設定することで、ヘッダーに画像を設定することができました。

以下は関数コンポーネントでの書き方は例です。

// 例
export default function ChatRoom({navigation}) {
  navigation.setOptions({
    headerTitle: () => {
      return (
    <View>
　　        <Image
   　        style={styles.image}
            　　 source={{uri: imagePath}}
       　　　    />
      　　</View>
      );
    },
  });
  return (
    <View>
      <Text>Home Screen!!</Text>
    </View>
  );
}

以上、お疲れ様でした！！