响应原生FlatList中的响应延迟

时间:2017-06-02 12:44:35

标签: react-native react-native-flatlist

我使用 <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(() => {...});

适合我。

1 个答案:

答案 0 :(得分:0)

当你触摸物品时道具会改变吗? 300列表元素不是什么大不了的事

&#34;限制渲染窗口还减少了React和本机平台需要完成的工作量,例如视图遍历。即使您使用这些新列表渲染最后一百万个元素,也无需迭代所有这些元素以进行渲染。您甚至可以使用scrollToIndex跳转到中间而不会过度渲染。&#34;