我有一个巨大的数据列表,我想在转换时发送到另一个屏幕,但我遇到的问题是性能问题。像我转换时,它需要大约2-3秒的响应时间传输,它不是很响应。
下面是我的代码设置:
const PopularNow = (props) => {
return (
<FlatList
data={props.data}
keyExtractor={item => item.id.toString()} //id.toString()
horizontal
showsHorizontalScrollIndicator={false}
style={{paddingLeft: 10}}
ItemSeparatorComponent={() => <ItemSeparator width={20} />}
ListHeaderComponent={() => <ItemSeparator width={20} />}
ListFooterComponent={() => <ItemSeparator width={50} />}
renderItem={({item}) => {
if (item.cover.image_id) {
return (
<TouchableOpacity
activeOpacity={0.7}
onPress={() =>
props.navigation.push('GamePreview', {
gameName: item.name,
gameCover: item.cover.image_id,
gameReleased: item.first_release_date,
total_Rating: item.total_rating,
gamePlatforms: item.platforms,
gameSummary: item.summary,
similarGames: item.similar_games,
Screenshot: item.screenshots,
Videos: item.videos,
====> involveCompanies: item.involved_companies,
gameGenres: item.genres,
artworks: item.artworks,
age_Rating: item.age_ratings,
age_Rating_Description: item.age_ratings,
gameModes: item.game_modes,
multiplayerModes: item.multiplayer_modes,
playerPerspectives: item.player_perspectives,
gameEngine: item.game_engines,
gameSeries: item.collection,
gameDLC: item.dlcs,
})
}>
<Image
resizeMode="cover"
style={styles.containerGames}
source={{uri: getImage(item.cover.image_id)}}
/>
</TouchableOpacity>
);
}
}}
/>
}
)
involved_companies
是什么使屏幕转换非常缓慢,因为我从API调用的公司的数量。当我注解出这个性能是非常响应。我想知道是否有一个替代方案,以提高性能与大量的数据。
1条答案
按热度按时间c9qzyr3d1#
我建议不要把整个数据传递到下一个屏幕。列表应该只显示它需要显示的内容 (基于您的设计)。
您所需要的只是传递id,因此在
GamePreview
屏幕中将不得不调用另一个API来获取游戏预览细节。通过这样做,你的
GamePreview
屏幕是可深入链接的,因为你可以允许用户分享游戏预览细节链接。如果使用当前的方式,你的链接必须包含所有的参数,这是不可能的,因为一些属性是对象。它应该可以减少不必要的数据量。如果它仍然不适合你的情况,你可以试试这个可怕的库flash-list