【ReactNative】リストをスワイプさせる（２）

今度はライブラリを使ってみます。

react-native-swiper

こちらも使い方は簡単。表示対象のリストを作ってSwiperタグで囲むだけです。いい感じですね。
このパッケージを使う利点は、

ドットで何枚目を表示しているかがわかる。
左右の移動ボタンが出せる。
アイテムの都度読み込みができる。
ループや自動再生の制御、スタイル変更などその他いろいろ。

逆に足りないのが、

ドットを押してページ移動できない

もしかしたらできるのかも。ドットの部分のコンポーネントを自作すればできるのかも。

ハマりポイントとしては、Swiperタグの配下のコンポーネントは閉じタグをつけること。<Image />とか省略したらうエラーになります。あとロード中なども含めてリストの長さが0でSwiperタグの中が空になる場合はエラーになるので、nullの場合は表示しないようにします。

<View
    style={{
      flex: 1,
      justifyContent: 'center',
    }}
  >
    {item.image_uri && (
      <Swiper
        style={{
          height: Window.width,
        }}
        loop={false}
        showsButtons={true}
        dotColor="rgba(255,255,255,0.2)"
        activeDotColor="rgba(255,255,255,0.8)"
        nextButton={
          <Text
            style={{ color: 'rgba(255,255,255,0.8)', fontSize: 48 }}
          >
            ›
          </Text>
        }
        prevButton={
          <Text
            style={{ color: 'rgba(255,255,255,0.8)', fontSize: 48 }}
          >
            ‹
          </Text>
        }
      >
        {item.image_uri?.map((v, i) => {
          return (
            <Image
              key={i.toString()}
              source={{ uri: item.image_uri?.[i] }}
              style={{
                height: Window.width,
                width: Window.width,
                resizeMode: 'contain',
              }}
            ></Image>
          );
        })}
      </Swiper>
    )}
  </View>