如何在React Native聊天应用中实现Whatsapp之类的蓝勾功能

问题描述

我正在构建一个运行良好的聊天应用程序，但是现在我想实现blue tick功能来检查是否有一条消息seen or not。我在此应用中使用socket.io和react-native-gifted-chat。我正在努力寻找一种方法来知道如何做到这一点。我访问了许多链接，但没有得到清晰的画面。 react-native-gifted-chat描述了为此使用renderTicks函数，但是我无法理解其实现。

渲染提示

  renderTicks = (message) => {
    const {currentMessage,renderTicks,user} = this.props;
    if (renderTicks && currentMessage) {
      return renderTicks(currentMessage);
    }
    if (currentMessage && user && currentMessage.user._id !== user._id) {
      return null;
    }
    if (
      currentMessage &&
      (currentMessage.sent || currentMessage.received || currentMessage.pending)
    ) {
      return (
        <View style={styles.content.tickView}>
          {!!currentMessage.sent && (
            <Text style={[styles.content.tick,this.props.tickStyle]}>✓</Text>
          )}
          {!!currentMessage.received && (
            <Text style={[styles.content.tick,this.props.tickStyle]}>✓</Text>
          )}
          {!!currentMessage.pending && (
            <Text style={[styles.content.tick,this.props.tickStyle]}>?</Text>
          )}
        </View>
      );
    }
    return null;
  };

礼物聊天

<GiftedChat
        ..........
        renderTicks={(message) => this.renderTicks(message)}
/>

此处 currentMessage 和 renderTicks 都将未定义。

请问我在这里做错了什么

有人可以帮我看看renderTicks的示例代码。

本机版本= 0.62.2

谢谢。

解决方法

您需要从接收方更新消息对象，当接收方打开聊天屏幕组件时，可以使用useEffect函数在服务器上更改消息对象。像这样将read属性设置为true。套接字将自动通知发件人对象已更改，并且发件人将重新读取聊天列表，并将read属性设置为true。和天才的聊天将显示一个蓝色的勾。

react-native react-native react-native-gifted-chat socket.io