时间戳

首页 > 解决方案 > 如何在反应原生聊天应用程序中实现类似 Whatsapp 的蓝色刻度功能

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]}>✓&lt;/Text>
          )}
          {!!currentMessage.received && (
            <Text style={[styles.content.tick, this.props.tickStyle]}>✓&lt;/Text>
          )}
          {!!currentMessage.pending && (
            <Text style={[styles.content.tick, this.props.tickStyle]}></Text>
          )}
        </View>
      );
    }
    return null;
  };

天才聊天

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

这里currentMessage和renderTicks都来了undefined。

我在这里做错了什么，请赐教。

或者

任何人都可以用 renderTicks 的示例代码帮助我。

反应原生版本 = 0.62.2

提前致谢。

标签： react-nativesocket.ioreact-native-gifted-chat

解决方案

您需要从接收者端更新消息对象，当接收者打开聊天屏幕组件时，您可以使用 useEffect 函数在服务器端对消息对象进行变异。就像它将读取属性设置为true。套接字将自动通知发送者对象已更改，发送者将重新获取聊天列表，并将读取属性设置为 true。并且有天赋的聊天会显示一个蓝色的勾号。

推荐阅读