如果聊天未发送到服务器，如何更改 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;
});