我想实现无限滚动,所以我在我的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的行为还是我遗漏了什么?解决办法是什么?我真的不想强迫我的组件太大,所以它总是占据整个屏幕。
您可以将组件内容大小与设备高度进行比较,并调用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函数。