问题标签 [react-native-gifted-chat]

预期行为：聊天中的所有消息同时无缝呈现

观察到的行为：在挂载组件或发送新消息时，消息会消失，然后按时间顺序一个接一个地重新渲染。这是当前行为的 gif：https ://imgur.com/a/GYYBzAb

我相当确定这与我如何处理 firestore 和组件状态之间的交互有关，但我不确定如何继续。

我使用 React Native Gifted Chat 来创建一个 UI 聊天，我想在气泡聊天下渲染聊天时间和符号。

我想做这样的图像：

我尝试使用渲染消息，但没有运气，请帮忙。

这是我在 StackOverflow 上的第一个问题。请使用 react-native-gifted-chat 和 socket.io 帮助我使用 react-native-gifted-chat 和 socket.io 的实时聊天应用程序一些消息甚至在“消息”状态下没有出现两次。

顶上聊天

中间的相同消息

在滚动的最后一个再次相同的消息

有天赋的聊天代码

这是出现新消息时调用的函数

只是想分享。

我发现很难为这个包自定义默认 UI。官方文档没有那么有用。

幸运的是，我能够解决它。

查看答案

我的 RN 0.61.5 应用程序正在运行react-native-gifted-chat 0.13.0. 这是非常简单的渲染：

我想通过输入文本框添加文件上传按钮（可以打开图库或文件管理器），允许用户上传图像或视频文件。我怎样才能做到这一点？我在网上搜索并查看了文档，但没有找到在聊天屏幕上添加按钮的方法/钩子。多谢。

是否可以更改图标或至少更改默认操作按钮的颜色/样式？

我没有在源代码中找到任何可用的东西。我正在使用以下代码，它显示默认操作按钮：

我想更改左下角的圆圈+按钮。

我正在学习 React Native，这是我在 Stack Overflow 上的第一篇文章。

我正在尝试重新渲染一个按钮以使其disabled属性从false变为truewhen onPress。

此按钮正在renderMessageImage从 react-native-gifted-chat 内部手动呈现。

我正在通过一个布尔值 in 执行此this.state操作，但是我看到日志上的状态值正在更新，但该按钮在视觉上保持不变，并且可以一次又一次地按下它而无需实际更改其disabled属性。

我在Chat.js班上有：

renderMessageImage然后，当消息具有图像时，我会从 Gifted Chat 调用以显示自定义消息设计：

这个自定义设计只是一个应该调用另一个方法然后禁用自身的按钮：

对于我到目前为止测试的内容，我可以看到 state 的值isButtonDisabled正确地从falseto改变true，并且正如我所读到的，状态的改变应该使组件重新渲染，但不幸的是它不是那样工作的。

更深入的测试：

然后我前往GiftedChat.js源react-native-gifted-chat代码尝试调试一些代码，看看那里发生了什么。我发现，每当我按下自定义按钮时，都会调用 of 两次componentDidUpdate：GiftedChat.js

一旦所有这些检查完毕，我就会看到状态正在更新，并且GiftedChat.js每次按钮单击都会更新一次组件和消息，但是我的按钮renderMessageImage永远不会重新渲染以正确显示其新disabled值并实际上被禁用。

我完全不知道还有什么要测试的，所以我真的很感谢一些关于我做错了什么的帮助。

非常感谢您提前。

编辑： 在我的课堂部分renderMessageImage由 GiftedChat调用，然后只要消息有图像（例如），GiftedChat 就会调用。那部分工作正常，一切都被调用，只是按钮状态（）的重新渲染没有更新：Chat.jsrender()this.renderMessageImagethis.state.messages[i].image != undefineddisabled

我在获取数据信息 firebase 时遇到问题。我正在尝试在我的社交应用程序上创建一个聊天部分，但由于某种原因，我无法弄清楚是什么导致了这个问题。我的密钥在一个单独的 js 文件中，并且在用户身份验证方面工作正常。当我运行 expo 时，我收到以下消息：

这是我的 Fire.js

我是本机反应的新手，我正在为我的应用程序添加聊天功能。为了学习，我按照教程制作了一个独立的聊天应用程序，它运行良好。但是当我尝试将它与我的项目的其余部分集成时 - 我得到的只是一个空白屏幕，我检查了两者中的天才聊天版本 - 它相同 ^0.13.0 并且我检查了两者中的聊天代码 - 这正是相同的。我不明白为什么什么都看不见，我该如何解决？帮助将不胜感激！也放上package.json，以防出现版本问题

独立聊天

包.json

在我的应用程序中：

包.json

在这里，我试图了解https://www.npmjs.com/package/react-native-gifted-chat此链接中提供的代码。但是在这里我无法理解为什么他们在 setState 函数中使用 2 _id (messages:[{_id:1, //code user:{ _id:2, //code }]) 并且他们正在编写 1 id (_id: 1 ) 在 render() 方法中。还有在 setState 函数中传递的 id 1 和 2 与在 render() 方法中给出的 id 之间有什么区别。

下面是代码片段：

从 'react' 导入 React 从 'react-native-gifted-chat' 导入 { GiftedChat }