プログラミング モバイルアプリ

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

スポンサーリンク

こんにちは!!

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

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

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

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

環境

・Expo SDK 37
・react-native-navigation: 6.3.7

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

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

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

今回の場合、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>
  );
}

 

 

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

スポンサーリンク

-プログラミング, モバイルアプリ

© 2024 エンジニア×ライフハック Powered by AFFINGER5