我使用 <FlatList
ListFooterComponent={this.renderFooter}
ItemSeparatorComponent={this.renderSeparator}
refreshing={this.state.refreshing}
onRefresh={this.doPullRefresh}
onEndReached={this.endFooter}
initialNumToRender={10}
onEndReachedThreshold={0.5}
removeClippedSubviews={false}
data={this.state.listdata}
renderItem={({item}) => <ListItem onPress={this.goToStuInfo} alldata={item} id={item.key} number={item.number} avatar={item.avatar} name={item.name} />}
/>
呈现列表:
this.state.listdata
数据的总大小约为300.因此,当其他数据呈现为列表项时,我可以看到显示一些数据。
此时(某些数据仍在呈现),如果我触摸某个项目,则会有延迟。我必须等待很长时间才能得到答复。即使我按下“返回”按钮,我也要等待。
列表是否可以首先响应我的触摸动作?
我的解决方案
嗯,我通过渲染10个项目解决了这个问题。
我会将更多数据推送到onEndReached
this.platform.ready().then(() => {...});
适合我。
答案 0 :(得分:0)
&#34;限制渲染窗口还减少了React和本机平台需要完成的工作量,例如视图遍历。即使您使用这些新列表渲染最后一百万个元素,也无需迭代所有这些元素以进行渲染。您甚至可以使用scrollToIndex跳转到中间而不会过度渲染。&#34;