React Native FlatList preformance issue with 400+ .json

Question

我对FlatList有一些性能问题。这个想法是将歌曲列表显示为平面列表。列表有 2 列，带有书签图标和标题。

在列表项上，单击我正在导航到将 JSON 中的歌曲文本作为参数传递的其他路由。在这条路线上，我只是显示歌曲文本

Json 文件结构：

[{"number":"1","title":"some title","text":"some text"},{...},{...}]

应用概述：

我正在导入 JSON 文件：import Songs from '../db/songs.json';(歌曲arr里面有400+对象(

<小时 />

renderItem()功能：

renderItem = (title, text) => {
let newTitle = title;
if (title.length > 38) {
newTitle = title.substr(0, 38) + '...';
}
return (
<View style={styles.listMainContainer}>
<View style={styles.listIconContainer}>
<TouchableOpacity>
<Icon name="bookmark" size={20} style={{opacity: 0.2}} />
</TouchableOpacity>
</View>
<View style={{flex: 0.9}}>
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate({
routeName: 'Song',
params: {songText: text, songTitle: title},
})
}>
<Text style={styles.listText}>{newTitle}</Text>
</TouchableOpacity>
</View>
</View>
);
};

<小时 />

render()功能

render() {
return (
<View style={{flex: 1}}>
<FlatList
data={Songs}
renderItem={({item}) => this.renderItem(item.title, item.text)}
keyExtractor={(item, index) => item.number}
/>
</View>
);
}

<小时 />

性能很差。这与列表加载速度无关。当我按下一个项目时，按下和<TouchableOpacity>操作之间存在严重的滞后。

我尝试使用不同的方法，例如，我想使用map()函数呈现列表

renderList = () => {
return (
Songs.map(item => {
if (item.title.length > 38) {
item.title = item.title.substr(0, 38) + '...';
}
return (
<View key={item.number} style={{ display: 'flex', flexDirection: 'row' }}>
<View style={{ flex: 0.1, marginTop: 8, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity>
<Icon name="bookmark" size={20} />
</TouchableOpacity>
</View>
<View style={{ flex: 0.9 }}>
<TouchableOpacity>
<Text style={{ fontSize: 18, marginTop: 8 }}>{item.title}</Text>
</TouchableOpacity>
</View>
</View>
)
})
)
};

性能滞后已经消失，但加载列表需要几秒钟(在模拟器上(

有什么提示吗？

Answer 1

当您有大量数据时，总是建议使用回收器视图，因为它克服了FlatList，VirtualizedList和ListView的大部分限制。

点击链接 React-native-recyclerView for the Documentation。