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

【React Native】画像をキャッシュして表示するライブラリ「react-native-fast-image」

React Native でアプリを開発しているのですが、Android、iOS 共に画像の表示がいまいち遅い…という現象が発生していました。
で、代替えできるライブラリがないか調べたところ、「react-native-fast-image」というライブラリを発見しました!
早速導入してみましたが…かなりいい感じです!

GitHub のページはこちら。

GitHub – DylanVann/react-native-fast-image: 🚩 FastImage, performant React Native image component.
https://github.com/DylanVann/react-native-fast-image

 

導入て順は、まずライブラリのインストールを下記コマンドで行います。

npm install react-native-fast-image --save

// iOS の場合は下記も実行
npx pod-install

事前準備は以上です。

サンプルコードはこちら。
まず、ライブラリをインポートします。

import FastImage from 'react-native-fast-image'

render()return() には下記のように追加します。

<FastImage
  style={{ width: 100, height: 100 }}
  source={{
    uri: '[画像パス]',
    headers: { Authorization: '[認証用トークン]' },
  }}
  />

必要最低限のコードは以上です!

source プロパティの指定方法については、React Native の <Image /> コンポーネントと大体同じだったので、そこまで実装には手間取りませんでした。
なお、これ以外のオプションとして、画像の優先度やリサイズ方法、キャッシュの仕様などを設定することもできます。
ですが、これらは基本的にはデフォルト値のままで問題ないかと思います。
それ以外のプロパティについては、上の GitHub をご確認ください。

 

以上、React Native の画像をキャッシュして表示するライブラリ「react-native-fast-image」の実装についてでした。
正直、ここまで変わるのか!と思うくらい早くなったので、React Native 標準の <Image /> コンポーネントよりもおススメです。
同じことでお悩みの方の参考になれば幸いです。

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