React Native：如何在底部呈现新消息？

debugcn 发表于 Dev

kd12345

我刚刚在我的React本机应用程序中实现了socket.io，以实现1-1私人消息传递。

插座按要求正确工作，即。消息正在实时发送。但是我的问题是，当我尝试发送消息时，最新消息应该显示在底部时，它会添加到倒置的Flatlist的顶部。

这是我的代码：

const message = route.params.message;
const [messages, setMessages] = useState([]);
const [refreshing, setRefreshing] = useState(false);
const [text, setText] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [socket, setSocket] = useState(null);
const { user } = useAuth();

useEffect(() => {
const newsocket =io.connect("http://192.168.1.103:9000")
setMessages(message.Messages)

newsocket.on('connect', msg => {
console.log(`user: ${user.id} has joined conversation ${message.id}`)
setSocket(newsocket)
newsocket.emit('subscribe', message.id);
});

newsocket.on("send_message", (msg) => {
console.log("this is the chat messages:", msg);
setMessages(messages => messages.concat(msg)) // I THINK PROBLEM IS HERE 
});

return(()=>newsocket.close());

}, []);

const onSend = (ConversationId,senderId,receiverId,message) => {
console.log("sent")
const to = (user.id===route.params.message.user1? 
route.params.message.user2:route.params.message.user1)
socket.emit('message', { to: to, from: user.id, message,ConversationId });
setText("")
messagesApi.sendMessage({ConversationId,senderId,receiverId,message});
};

const updateText=(text)=>{
setText(text);
}

return(
<Animated.FlatList
    inverted
    data={messages}
    keyExtractor={(item,index)=>index.toString()}
    extraData={messages} // add this    
    renderItem={({item,index})=>(
        <>
        <MessageDate_Time 
        text={moment(item.createdAt).fromNow()} 
        mine={item.senderId !== user.id}
        />
        <MessageBubble
        text={item.message}
        mine={item.senderId !== user.id}
        />
         </>
    )}
    />
)

莱里·格格扎兹

更改concat为unshift。

newsocket.on("send_message", (msg) => {
    setMessages(messages => messages.unshift(msg));
    // OR
    const newMessages = [msg, ...messages];
    setMessages(newMessages);
});

因此，您使用的是反向道具，因此消息是相反的，这就是为什么您需要在开头到结尾添加新消息的原因。有点令人困惑:)）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。