React native React本机平面列表一次呈现几个项目

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

<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();
    }}

/>

}
keyExtractor={（项，索引）=>index.toString（）}
initialNumToRender={messages.length}
initialScrollIndex={messages.length-1}
ref={ref=>this.flatList=ref}
onContentSizeChange={（contentWidth，contentHeight）=>{
这个.flatList.scrollToEnd（）；
}}
/>

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

理想情况下，我想在向用户显示任何内容之前，我需要等待它完全渲染，但是（A）他们需要等待几秒钟才能开始使用聊天室，并且（B）我不认为平面列表是这样工作的，我假设在渲染之前元素必须是可见的

有没有更好的办法？（顺便说一下，在Android上测试）

编辑：添加ChatMessage组件以确保完整性

// 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
    }

})

//聊天信息
从“React”导入React，{Component}
导入{
样式表，
图像背景，
文本，
看法
}从“反应本机”
类ChatMessage扩展组件{
建造师（道具）{
超级（道具）
this.state={}
}
render（）{
返回(
{this.props.message.name}
24小时
{this.props.message.text}
)
}
}
导出默认聊天信息；
const styles=StyleSheet.create({
聊天室留言：{
填充垂直：10，
水平方向：24
},
聊天室布局：{
flexDirection:“行”
},
图片：{
宽度：40，
身高：40，
marginRight:12
},
聊天信息图片图片：{
宽度：40，
身高：40
},
聊天信息\图片\图像\背景：{
宽度：40，
身高：40
},
chatMessage\u详细信息：{
弹性：1
},
聊天室信息\u名称\u文本：{
颜色：“#FFF”，
尺寸：14，
fontWeight:“粗体”
},
聊天室信息\u姓名\u时间：{
尺寸：11，
颜色：“rgba（255255,0.6）”
},
chatMessage\u消息：{
flexDirection:'行'，
对齐项目：“中心”
},
聊天室消息\u消息\u文本：{
颜色：“#FFF”，
字体大小：12
}
})

如果项目数量较少，并且希望一次渲染所有项目，则应使用

ScrollView：一次渲染所有元素，但如果有大量元素，则渲染速度较慢

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

对于平面列表优化，无论何时渲染子对象，您都需要使用

PureComponent

，以便仅渲染子对象

---

此外，在

密钥提取程序

中，为

项目

使用唯一id，并且不要依赖

索引

，因为当项目更新时，

索引

不可靠，可能会更改

您是否也可以在中发布您的

聊天信息

组件，他使用列表从下到上进行渲染。添加子组件感谢@Kranthi，我们将对此进行研究。感谢Pritish，我想知道“大数字”是什么意思？我可能不会允许超过100人。我似乎已经发现inversed=“true”似乎在工作，并且从下到上呈现列表，这不是我在文档中有限的描述中所期望的（我只需要颠倒数组的顺序）。我认为你的答案是正确的，我不确定你是否想为可能遇到这个答案的人添加关于inversed=“true”的内容？大量的数字大约是

1000

，我只是想强调一下

Flatlist

和

ScrollView

的默认行为，以及

PureComponent

的使用，这将大大提高性能。其余的都是表面上的改变。