有没有办法获取react-native-swiper的滑动进度？

Question

我想在 ScrollView 上有一个类似 onScroll 的事件，但在 Swiper 上有一个类似 onSwipe 的事件。在此回调中，我想获得 "swipe progress"（例如，将 50% 刷到第二项）。有了所有支持的回调，我可以在滑动开始或结束时做一些事情，但我也想要中间的所有步骤。我该怎么做？

Answer 1

获取当前view的滚动位置

Swiper 组件是一个 ScrollView，您也可以将其原生属性与 Swiper 一起使用，对于您的情况，请使用 onScroll 属性来获取滚动条的位置以及滑动的百分比。

const viewWidth = Dimensions.get('window').width;

...

<Swiper
   scrollEventThrottle={16}
   onScroll={(e) =>
     const scrolledPercentage =(e.nativeEvent.contentOffset.x / (viewWidth * (this.currentIndex + 1)));
       }
>
...
</Swiper>

.

获取您的浏览进度

只需使用 onIndexChanged 道具获取当前索引，然后使用滑动器内的观看次数计算您的进度

<Swiper 
  style={styles.wrapper} 
  showsButtons={true} 
  onIndexChanged={(index) => {

   let progress= index/totalNumberOfView
   let progressInPercentage = Math.floor(progress*100)

   this.setState({
    progress,
    progressInPercentage
   })
  }
>

有没有办法获取react-native-swiper的滑动进度？

Is there a way to get the swipe progress of react-native-swiper?

swiper

react-native

expo

react-native-swiper