我有一个包含800多个条目的数据源,我正在使用FlatList来渲染它 .
每个renderItem都会接收一个函数,以便在项目按下时导航到另一个屏幕 .
问题是屏幕之间的过渡非常缓慢 .
我注意到即使滚动工作很快,仍然会为DOM中的所有800个条目调用renderItem . 当最终渲染所有项目时,导航工作正常 .
我尝试过使用initialNumToRender,getItemLayout和waitForInteraction道具,并尝试将我的renderItem组件(现在是无状态组件)更改为纯组件 . 到目前为止似乎没有任何工作 .
任何建议将不胜感激 .
这里有一些代码可能会有所帮助:
<FlatList
data={this.state.listDataSource}
renderItem={({ item, index }) => this.renderListItem(item, index)}
keyExtractor={this._keyExtractor}
style={{
flex: 1,
marginHorizontal: 30,
borderTopWidth: 1,
borderColor: '#919191',
}}/>
renderListItem(item, index) {
return <ListItem dotFunc={() => this.onListItemPress(index)} item={item} />;
}
onListItemPress(index) {
Actions.itemDetail({
index
});
}
// ListItem.js correctly exported
const ListItem = ({ dotFunc, item }) => (
<TouchableOpacity onPress={() => Actions.contactDetail({rowID})}>
<Text>{Item}</Text>
</TouchableOpacity>
}
谢谢