Question

我在反应原生中使用List View onEndReached组件时遇到了一些麻烦。

渲染代码：

@autobind
  _fetchMoreHistory(){

    console.log("Fetch more history called");

  }

<View style={[styles.Ctr]}>
   <ListView dataSource={this.state.txHistorySource}
         renderRow={ this._renderRow }
         onEndReached ={ this._fetchMoreHistory }
         onEndReachedThreshold  = {10}/>
</View>

我打开屏幕_fetchMoreHistory的那一刻被调用两次，并在onEndReached到达之后正常工作。有人可以帮忙调试吗？

Answer 1

我遇到了同样的问题，并且搜索了很多，但没有找到任何答案，所以我用一个条件来检查第一个请求是否得到了我再次发射的数据，否则我不会

实施例 // onEndReached 如果（条件）{ 拨打电话 }

Answer 2

所以我的解决方案很简单。完全不要使用onEndReached。使用onScroll并检测滚动的结尾。

isCloseToBottom = ({ layoutMeasurement, contentOffset, contentSize }) => { const paddingToBottom = 20; // how far from the bottom return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom; };

和FlatList组件

 <FlatList      
      data={data}        
       onScroll={({ nativeEvent }) => {
          if (this.isCloseToBottom(nativeEvent)) {
            // Dont forget to debounce or throttle this function.
            this.handleOnEndReached();
          }
       }}
  />

Answer 3

您可以尝试我的解决方案

您应该配置限制＆gt; 10.示例限制= 15

将onMomentumScrollBegin道具添加到ListView声明中。

<ListView
  data={this.props.data}
  onEndReached={...}
  onEndReachedThreshold={0.5}
  ...
  onMomentumScrollBegin={() => { this.onEndReachedCalledDuringMomentum = false; }}
/>

修改onEndReached回调以触发每个动量只获取一次数据。

onEndReached =()=> { if(!this.onEndReachedCalledDuringMomentum) { this.props.fetchData(); this.onEndReachedCalledDuringMomentum = true; } };

Answer 4

我已经通过创建一个状态变量来解决此问题，该变量告诉我服务是否正在加载。

class Component1 extends Component {
    public constructor(props) {
        super(props);

        this.state = {
            isLoading: false,
            listOfItems: []
        };
    }

    public render(){
        return (
            <FlatList
                data={this.state.listOfItems}
                renderItem={this.renderItem}
                onEndReachedThreshold={0.1}
                onEndReached={this.loadData}
            />
        );
    }

    private loadData = () => {
        if (this.state.isLoading === true) {
            /// Avoid make another request is there's happening a request right now
            return;
        }

        this.fetchData()
            .then(() => {
            /// Handle success response
            })
            .finally(() => {
                this.setState({isLoading: false});
            });
            .catch(() => {});
    }
}

Answer 5

我有同样的问题。但是我发现我有ScrollView包裹了我的FlatList。当我将其删除时，所有内容都开始正常工作。

很遗憾，在官方文档中什么都没说

Answer 6

您可以编写用于在onMomentumScrollEnd而非onEndReached中获取数据的代码，如下所示：

onMomentumScrollEnd={() => this.props.onEndReached()}

在react native文档中可能没有将它写为可用的道具，但是如果您将看到FlatList的源代码，它将使用Virtualized List，而后者会提供上述道具。 / p>

React本机列表视图onEndReached多次调用

6 个答案: