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

Question

我想在 ScrollView 上有一个类似 onScroll 的事件，但在 Swiper 上有一个 onSwipe 事件。在这个回调中，我想获得“滑动进度”（例如，将 50% 滑动到第二个项目）。使用所有支持的回调，我可以在滑动开始或结束时做一些事情，但我也想要介于两者之间的所有步骤。我怎么能这样做？

Answer 1

获取当前视图的滚动位置

Swipercomponent 是 a ScrollView，您也可以使用它的本机 props Swiper，对于您的情况，使用onScrollprop 来获取滚动的位置和滑动的百分比。

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

...

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

.

获取您通过的视图的进度

只需使用onIndexChangedprops 获取当前索引，然后使用 swiper 内的 Views 计数来计算您的进度

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

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

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