Как получить индекс прокрутки - PullRequest
Новая
       27

Как получить индекс прокрутки

0 голосов
/ 10 января 2020

Я использую реагирующий нативный scrollview до slide мой imageBackground.

Я использую pagingEnabled, чтобы провести изображения. Но есть ли способ получить номер index, когда я проведу пальцем?

Я использую вид прокрутки, как показано ниже. Добавление pagingEnabled сделает просмотр прокрутки похожим на swiper, но я не знаю, как получить index. 

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

Ответы [ 2 ]

1 голос
/ 10 января 2020

Вы можете использовать метод onScroll вместе с модулем 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

1 голос
/ 10 января 2020

Я использовал опору onScroll для проверки текущего смещения горизонтальной прокрутки. Затем сравните текущее смещение с шириной вашего устройства.

Попробуйте: 

<ScrollView onScroll={this.handleScroll} />

А затем: 

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