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

【React Native】複数画像をスライドショーで表示できるライブラリ「react-native-image-slider-box」

React Native のアプリに画像のスライドショー機能を実装したくて検索していたら、私のイメージ通りのライブラリを発見できたのでまとめ。
実装も簡単だし、レイアウトも調整しやすかったのでかなりお勧めです。

GitHub のページはこちらから。

GitHub – intellidev1991/react-native-image-slider-box: A simple and fully customizable React Native component that implements an Image Slider UI.
https://github.com/intellidev1991/react-native-image-slider-box

 

ライブラリのインポートコマンドはこちら。

npm install react-native-image-slider-box --save

上記のコマンドの実行が完了したら、プロジェクトに実装していきます。

import { SliderBox } from "react-native-image-slider-box";

const images = [
  "https://cpoint-lab.co.jp/wp-content/uploads/2019/07/cameraimgl9942_tp_v.jpg",
  "https://cpoint-lab.co.jp/wp-content/uploads/2017/12/UNI_MONV15002722_TP_V.jpg",
  "https://cpoint-lab.co.jp/wp-content/uploads/2017/12/iPhone8IMGL8492_TP_V.jpg",
];

画像のスライドショー機能を使いたいファイル内に上記を追加し、ライブラリをインポートします。
スライドショー表示したい画像は、上記のように配列で持ちます。

あとは、render()return 内に下記を追加するだけ!

<SliderBox images={images} dotColor="red" inactiveDotColor="gray" />

なお、上記のサンプルでは、ナビゲーションのドットを表示している場所は赤色に、それ以外は灰色に指定しています。
他にも、スライドショーの高さを変更できたり、表示する画像のリサイズ方法を変更したり、ループさせたり、自動で次の画像にスライドさせたりすることができます。
ちなみに、デフォルトのスライドショーの高さは 200 で、画像のリサイズ方法は cover です。

細かいレイアウトの指定をしなければ、このように短いコードで済むのはいいですね!
特に、ナビゲーションドットの色指定が簡単だったのが嬉しいです。

 

以上、React Native で画像のスライドショー機能を実装できるライブラリ「react-native-image-slider-box」のご紹介でした。
ご参考になれば幸いです。

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