React-Native onScroll Событие не вызывается

Question

я пытаюсь создать разбитый на страницы / бесконечный компонент прокрутки, но событие onScroll никогда не запускается.

кто-нибудь знает, что я здесь не так делаю?

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ScrollView } from 'react-native';

class PaginatedScrollView extends Component {
    static propTypes = {
        paginationSize: PropTypes.number,
        data: PropTypes.array.isRequired,
        renderItem: PropTypes.func.isRequired
    }

    handleOnScroll (event) {
        console.log(event.nativeEvent.contentOffset.y);
    }

    render () {
        const {
            data,
            renderItem,
            paginationSize
        } = this.props;

        return (
            <ScrollView
                onScroll={e => this.handleOnScroll(e)}
                onContentSizeChange={console.log}
            >
                {data
                    .slice(1, paginationSize)
                    .map(renderItem)
                }

            </ScrollView>
        );
    }
}

export default PaginatedScrollView;

кажется, что onContentSizeChange вызывают, но onScroll нет.

Answer 1

Хотя верно, что вам может потребоваться связать функцию (если вы хотите использовать this внутри обработчика событий), это не причина, по которой вы не видите обратный вызов onScroll.

При использованииScrollView onScroll обработчик событий, вам также нужно указать, как часто вы хотите получать информацию о прокрутке, передавая дополнительные scrollEventThrottle реквизиты с минимальным значением 16 (чтобы получать событие каждые 16 мс, что составляет один раз длякаждый кадр в 60fps), иначе вы получите только первое событие.

Некоторые дополнительные соображения относительно того, что вы хотите сделать:

• Возможно, вы захотите передать в качестве значенияonScroll поддерживает обработчик вместо того, чтобы каждый раз создавать анонимную функцию, например: onScroll={this.handleOnScroll}
• Для реализации бесконечной прокрутки вам может быть лучше использовать FlatList.Поскольку React Native Documentation говорит, что ScrollViews лучше для небольшого количества элементов:

ScrollView лучше всего работает, чтобы представить небольшое количество вещейограниченный размер.Все элементы и представления ScrollView отображаются, даже если они в данный момент не отображаются на экране.Если у вас длинный список элементов, которые могут уместиться на экране, вы должны использовать FlatList вместо

Answer 2

Вам необходимо либо связать функцию handleOnScroll в конструкторе, либо заменить ее на функцию стрелки

Связать handleOnScroll в конструкторе

  constructor(props){
       super(props);
       this.handleOnScroll = this.handleOnScroll.bind(this);
  }

ИЛИ

Заменить ее на функцию стрелки

 handleOnScroll = event => {
    console.log(event.nativeEvent.contentOffset.y);
}