reactjs - 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

您需要在构造函数中绑定(bind)handleOnScroll函数或将其更改为箭头函数

在构造函数中绑定(bind)handleOnScroll

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

或者

改为箭头函数

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