Question

我想实现无限滚动，所以我在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（）和componentWillMount中调用的每个获取操作都获得了5个数据。因为前5个数据并没有填满整个屏幕，所以我预计会自动调用onEndReached，因为它已经在ListView的末尾，但它没有。

我尝试将renderRow中的Text标签设置为此

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

它按我想要的方式工作。如果我的应用程序在宽屏设备上运行，我担心我的renderRow不会填满整个屏幕。

是ListView的行为还是我遗漏了什么？解决办法是什么？我真的不想强迫我的组件变得非常大，所以它总是填满整个屏幕。

Answer 1

onEndReached？：function

在渲染所有行并滚动列表时调用   到底部的onEndReachedThreshold。本机滚动事件   提供。

除非用户滑动列表视图（宽屏幕场景），否则不会自动调用它。

您可以set a threshold触发onEndReached而不会到达屏幕的下端。

onEndReachedThreshold：数字

调用onEndReached的像素阈值（虚拟，非物理）。

或者，当您的屏幕未被行完全覆盖时，您可以手动呼叫loadMoreNews()。为此，只需测量CardSection组件的高度，然后将Dimensions.get('window').height除以该值，即可获得适合当前屏幕的CardSection组件数。

如果您的行没有固定的高度，您可以使用onLayout功能。

Answer 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}
/>

React Native ListView onEndReached没有被调用

2 个答案: