提问者:小点点

未调用React本机ListView onEndReached


我想实现无限滚动,所以我在我的ListView标签中这样做

renderRow(data){
    return (
        <CardSection>
            <Text>
                {data.id}
            </Text>
        </CardSection>
    );
}

<ListView 
    dataSource={this.dataSource}
    renderRow={this.renderRow}
    onEndReached = {this.loadMoreNews.bind(this)}
    pageSize = {5}
/>

我在loadMoreNews()和组件WillMount中调用的每个抓取操作都会得到5个数据。因为前5个数据没有填满整个屏幕,所以我期望自动调用onEndReache,因为它已经在ListView的末尾了,但是它没有。

我尝试将renderRow中的文本标记样式设置为

renderRow(data){
    return (
        <CardSection>
            <Text style={{height:100}}>
                {data.id}
            </Text>
        </CardSection>
    );
}

我想怎么做就怎么做。如果我的应用程序在宽屏设备中运行,我担心我的渲染行不会填满整个屏幕。

是ListView的行为还是我遗漏了什么?解决办法是什么?我真的不想强迫我的组件太大,所以它总是占据整个屏幕。


共2个答案

匿名用户

您可以将组件内容大小与设备高度进行比较,并调用loadMoreNews fn。

const deviceHeight = Dimensions.get('window').height;

<ListView 
   dataSource={this.dataSource}
   renderRow={this.renderRow}
   onLayout={(event) => {
      var layout = event.nativeEvent.layout;
      if(layout.height < deviceHeight) this.loadMoreNews()
   }}
   onEndReached = {this.loadMoreNews.bind(this)}
   pageSize = {5}
/>

匿名用户

函数

当所有行都已呈现且列表已滚动到底部的OneDreachdThreshold范围内时调用。提供了本机滚动事件。

除非用户滑动listview(宽屏幕场景),否则不会自动调用它。

您可以设置一个阈值来触发ONEDRACHED而不到达屏幕底部。

###########################################################################################

以像素为单位的阈值(虚拟,而非物理),用于调用。

或者,当您的屏幕没有被行完全覆盖时,您可以手动调用loadMoreNews()。为此,只需测量万向节部件的高度,然后划分尺寸。获取('window')。高度,这将为您提供可装入当前屏幕的CardSection组件的编号。

如果您的行没有可以知道的固定高度,则可以使用onLayout函数。