React Native FlatList 一次呈现几个项目

Question

我的应用程序中有一个聊天消息列表，新项目添加到底部。我使用了另一个 SO 问题中的一些代码，使 FlatList 在添加新项目时粘在底部，如下所示

<FlatList
data={messages}
renderItem={({item}) => <ChatMessage message={item}></ChatMessage>}
keyExtractor={(item, index) => index.toString()}
initialNumToRender={messages.length}
initialScrollIndex={messages.length-1}
ref={ref => this.flatList = ref}
onContentSizeChange={(contentWidth, contentHeight)=>{        
this.flatList.scrollToEnd();
}}
/>

问题是，当初始列表呈现时(只有 35 个项目，目前在数组中硬编码(，它似乎只渲染几个项目，然后向下滚动一点，然后再渲染一些，然后向下滚动一点，直到它最终完成渲染并粘在底部。它断断续续且缓慢，尽管添加了initialNumToRender={messages.length}并为每个结果渲染了一个非常简单的节点。

理想情况下，我想我需要等待它完全呈现才能向用户显示任何内容，但是 (A( 他们必须等待几秒钟才能开始使用聊天室，(B( 我不认为这就是 Flatlist 的工作方式，我认为元素在渲染之前必须是可查看的。

有没有更好的方法可以做到这一点？(顺便说一下，在安卓上测试(

编辑：添加聊天消息组件以确保完整性

// Chat Message
import React, { Component } from 'react'
import { 
StyleSheet,
ImageBackground,
Text,
View
} from 'react-native'
class ChatMessage extends Component {
constructor(props) {
super(props)
this.state = {  }
}
render() { 
return (
<View style={styles.chatMessage}>
<View style={styles.chatMessage_layout}>
<View style={styles.chatMessage_pic}>
<View style={styles.chatMessage_pic_image}>
<ImageBackground 
source={require('./assets/images/profile-pics/example-profilr.png')} 
style={styles.chatMessage_pic_image_background}
imageStyle={{ borderRadius: 40/2 }}
resizeMode="cover"
>
</ImageBackground>
</View>
</View>
<View style={styles.chatMessage_details}>
<View style={styles.chatMessage_name}>
<Text style={styles.chatMessage_name_text}>
{this.props.message.name}
<Text style={styles.chatMessage_name_time}>  24h</Text>
</Text>
</View>
<View style={styles.chatMessage_message}>
<Text style={styles.chatMessage_message_text}>{this.props.message.text}</Text>
</View>
</View>
</View>
</View>
)
}
}
export default ChatMessage;

const styles = StyleSheet.create({
chatMessage: {
paddingVertical: 10,
paddingHorizontal: 24
},
chatMessage_layout: {
flexDirection: 'row'
},
chatMessage_pic: {
width: 40,
height: 40,
marginRight: 12
},
chatMessage_pic_image: {
width: 40,
height: 40
},
chatMessage_pic_image_background: {
width: 40,
height: 40
},
chatMessage_details: {
flex: 1
},
chatMessage_name_text: {
color: '#FFF',
fontSize: 14,
fontWeight: 'bold'
},
chatMessage_name_time: {
fontSize: 11,
color: 'rgba(255,255,255,0.6)'
},
chatMessage_message: {
flexDirection: 'row',
alignItems: 'center'
},
chatMessage_message_text: {
color: '#FFF',
fontSize: 12
}
})

Answer 1

如果您的项目数量较少，并且希望一次呈现所有项目，则应使用文档中提到的ScrollView

ScrollView：一次呈现所有元素，但如果有大量元素，则速度会变慢。

FlatList：当项目即将出现时，以延迟模式呈现项目，并在项目离开可见显示时将其删除，以节省内存，使其可用于大型列表的性能。

对于平面列表优化，您需要在渲染子项时使用PureComponent，以便它仅浅表比较道具。

同样在keyExtractor为您的item使用唯一的 id，并且不依赖于index，因为当项目更新时，index不可靠并且可能会更改