如果聊天未发送到服务器，如何更改 React Native Gifted Chat 图标？

Question

我使用 react native 天才聊天，我希望当用户无法向服务器发送聊天时，气泡中的图标会发生变化？

如果用户发送消息失败，可能会出现这样的图标：

谢谢，请帮忙

Answer 1

我知道这是很久以前的事了，但也许它可以帮助某人。如果您使用 Hooks 并且您的消息数组定义如下 const [messages, setMessages] = useState();

因此，当点击发送时，您可以将新消息添加到您的状态。添加pending 和sent 等属性很重要

yourMessage.pending = true;
yourMessage.sent = false;

所以，当你有后端响应时，你可以更新

yourMessage.pending = false;
yourMessage.sent = true;

最后，更新消息状态

setMessages(previousMessages => {
    const index = previousMessages.findIndex(aMessage => aMessage._id == yourMessage._id);
    const newArr = [...previousMessages];
    newArr[foundIndex] = yourMessage;
    return newArr;
});