如何在React Native中創建圖像滑塊？

Question

現在在我們的應用程序中，我們能夠在ScrollView中滾動圖像，但圖像卡在滾動之間。 如果用戶不滾動圖像一直在應用程序上為他們完成作業並且圖像捕捉到位，我想將其轉到滾動的位置。 我希望能夠計算圖像滑過多少以及向哪個方向滑動，但我無法找到方法來做到這一點。 有誰知道一個簡單的方法來做到這一點？

<ScrollView style={{borderRadius: 7}}
    horizontal
    showsHorizontalScrollIndicator={false}
    scrollEventThrottle={10}
    pagingEnabled
    onScroll={
        Animated.event(
            [{nativeEvent: {contentOffset: {x: this.calcImgPosition()}}}]
        )
    }
>
    {imageArray}
</ScrollView>

Answer 1

您可以使用react-native-swiper-flatlist組件。 它使用起來相當簡單，文檔很好（ https://github.com/gusgard/react-native-swiper-flatlist ）。

Answer 2

如果您想通過鏈接使用多個圖像，那么react-native-image-swiper將對您有所幫助。

這么簡單的用法。

import {Dimensions} from 'react-native';
import ImagesSwiper from "react-native-image-swiper";

const { width, height } = Dimensions.get("window");
const customImg = [
  "https://..",       // img link 1
  "https://...",      // img link 2
  "https://...."      // img link 3
  // ..
];

<ImagesSwiper 
  images={customImg}
  width={width} 
  height={height - 400} 
/>