タイトル通り、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: {
// 指定したいヘッダー情報
}
}} />
上記サンプルコードのように Props の source で表示したい画像の uri を指定する時に、併せて method や headers を指定することができます。
なお、上記のサンプルコードでは省略しましたが、必要であれば body を指定することもできるとのこと。
このように指定したところ、アクセスの際にヘッダー情報が必要になる画像データも問題なく表示できることを確認できました！
また、React Native Elements の Avatar でも全く同じことができます。
現在開発中のアプリでは、画像表示をほぼ Avatar コンポーネントを使用しているので、Header 情報を追加する処理が Avatar コンポーネントの標準機能で使えてよかったです…！
以上、React Native の Image コンポーネントで画像を添付する際、ヘッダー情報やメソッドを追加する方法についてでした。
ご参考になれば幸いです。
