如何获取滚动视图索引

Question

我正在使用 react-native scrollview 来 slide 我的 imageBackground。

我正在使用pagingEnabled刷图。但是有什么方法可以让我在滑动时获得 index 的号码吗？

我正在像下面的代码一样使用滚动视图。添加 pagingEnabled 将使滚动视图像 swiper 一样工作，但我不知道如何获得 index.

<ScrollView horizontal={true} pagingEnabled={true}>
            {this.createScrollImageSources(this.state.image)}
</ScrollView>

Answer 1

我所做的是使用 onScroll 属性来检查水平滚动视图的当前偏移量。然后将当前偏移量与您的设备宽度进行比较。

尝试：

<ScrollView onScroll={this.handleScroll} />

然后：

handleScroll: function(event: Object) {
 console.log(event.nativeEvent.contentOffset.x);
},

Answer 2

您可以使用onScroll method together with the Dimensions 模块来计算currentScreenIndex。

示例：

渲染

  <View style={styles.container}>
   <ScrollView pagingEnabled horizontal style={{flex: 1}} onScroll={(e)=>this.handleOnScroll(e)} scrollEventThrottle={5}>
     <View style={{width: SCREEN_WIDTH, backgroundColor: 'yellow'}} />
     <View style={{width: SCREEN_WIDTH, backgroundColor: 'red'}} />
     <View style={{width: SCREEN_WIDTH, backgroundColor: 'green'}} />
   </ScrollView>
  </View>

handleOnScroll

  handleOnScroll(event){
    //calculate screenIndex by contentOffset and screen width
    console.log('currentScreenIndex', parseInt(event.nativeEvent.contentOffset.x/Dimensions.get('window').width));
  }

工作演示

https://snack.expo.io/HyxzFr2HxU

如何获取滚动视图索引

How to get scrollview index

react-native

react-native-scrollview

示例：

工作演示