多次显示相同消息的react-native-gifted-chat

时间:2018-12-15 06:49:26

标签: reactjs react-native react-native-gifted-chat

我在我的本机应用程序中使用react-native-gifted-chat。正如我在this图像中所示,多次显示相同的消息,并且message: Yes getting new msg的位置也与实际位置不同。 我的问题与this相同。谁能帮我解决这个问题。

谢谢。

3 个答案:

答案 0 :(得分:2)

我已经解决了我的问题。 @罗恩,您是对的,但就我而言,问题就不同了。我通过更改参数格式解决了它。采取了不同的格式,我通过了不同的格式,因此它们彼此冲突。这是可能对其他人有用的解决方案。

parse = snapshot => {
    const { timestamp: numberStamp, text } = snapshot.val();
    const { key: _id } = snapshot;
    const createdAt = moment(snapshot.val().createdAt, "DD/MM/YYYY hh:mm:ss");

     const user = { };
     var temp_data = snapshot.val()
     if(snapshot.val().name == this.state.temp_logged_name) {
         user._id = 1; 
         user.name = temp_data.name;
         user.avatar = temp_data.avatar;
     }
     const message = {
        _id,
        createdAt,
        text,
        user,
     };
     return message;
};

答案 1 :(得分:2)

我也遇到了这个问题。我已经在移动应用上设置了react-native-gifted-chat。在另一端,我用脚本创建了一个简单的HTML页面,以初始化Websocket连接并在onsend事件上发送消息。后来我意识到,虽然在应用程序端生成了唯一的ID(因为该ID是由库本身生成的),但在另一端却没有这种类型的

基本上,当一条消息缺少唯一ID _id时,就会出现这种奇怪的行为。执行GiftedChat.append(previousMessages, messages)时,每封邮件必须至少具有 个以下属性。

      {
        _id: 1,
        text: 'Hello developer',
        createdAt: new Date(),
        user: {
          _id: 2
        }
      }

答案 2 :(得分:0)

背后可能有两个原因,

1)每个消息都应该传递一个唯一的ID,因此只需使用uuidv4 npm程序包并将其附加到对象的_id属性即可。

示例:

messages: GiftedChat.append(previousState.messages, {
              _id: uuidv4(), // or use  Math.round(Math.random() * 1000000)
              text: text,
              createdAt: new Date(),
              user: {
                _id: 2,
                name: "React Native",
                avatar: "https://placeimg.com/140/140/any"
              },
              image: attachment
            })

2)第二种可能是您用来启动用户之间的聊天的网关上。因此,某些网关存在已知问题,需要多次重复发送消息。您可以在每次收到新消息并将其推送到聊天屏幕时进行字符串比较,但不建议这样做。