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

【问题标题】：Is there a way to get the swipe progress of react-native-swiper?有没有办法获得 react-native-swiper 的滑动进度？
【发布时间】：2020-05-24 22:58:42
【问题描述】：

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

【问题讨论】：

标签： react-native expo swiper react-native-swiper

【解决方案1】：

获取当前视图的滚动位置

Swiper 组件是 ScrollView，您也可以将其原生 props 与 Swiper 一起使用，在您的情况下使用 onScroll prop 来获取滚动的位置和滑动的百分比。

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

...

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

获取已通过视图的进度

只需使用 onIndexChanged 道具获取当前索引，然后使用 swiper 内的视图计数计算您的进度

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

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

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

【讨论】：

滑动进度是指从一个视图到下一个视图的进度，而不是我滑动的所有视图中的哪个视图。使用 onIndexChanged 属性可以轻松计算所有视图的进度，但不是我想要的...
哦，我明白你的意思了，很抱歉造成误会。我已经更新了您的案例的答案。