浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】Imageコンポーネントで画像を表示する際にヘッダー情報を追加する

タイトル通り、React Native の Image コンポーネントに画像 URL を指定した際に、ヘッダー情報やメソッドも併せて指定する方法についてです。
今回初めて実装したので、備忘録としてまとめ。
なお、特にライブラリ等はインストールする必要はなく、React Native の Image コンポーネントに標準で実装されているものをそのまま使います。

公式サイトはこちらから。

Images · React Native
https://reactnative.dev/docs/images#network-requests-for-images

 

実装方法ですが、Image コンポーネントを使用する際に下記のように記述するだけです!

<Image
  source={{
    uri: '[表示したい画像パス]',
    method: 'GET',
    headers: {
      // 指定したいヘッダー情報
    }
  }} />

上記サンプルコードのように Propssource で表示したい画像の uri を指定する時に、併せて methodheaders を指定することができます。
なお、上記のサンプルコードでは省略しましたが、必要であれば body を指定することもできるとのこと。
このように指定したところ、アクセスの際にヘッダー情報が必要になる画像データも問題なく表示できることを確認できました!

また、React Native Elements の Avatar でも全く同じことができます。
現在開発中のアプリでは、画像表示をほぼ Avatar コンポーネントを使用しているので、Header 情報を追加する処理が Avatar コンポーネントの標準機能で使えてよかったです…!

 

以上、React Native の Image コンポーネントで画像を添付する際、ヘッダー情報やメソッドを追加する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)