你如何在泡泡聊天反应原生天才聊天下呈现项目时间？

Question

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

我想要这样的图片：

我试过使用渲染消息但没有成功，请帮忙。

Answer 1

我自己正在研究这个。您需要做的是拥有自定义 renderBubble，您可以在其中使用自己的组件进行包装。它看起来像这样。代码的第一部分只是时间戳的左对齐或右对齐，这取决于消息是否由当前用户编写。

renderBubble(props) {
    var sameUserInPrevMessage = false;
    if (props.previousMessage.user !== undefined && props.previousMessage.user) {
      props.previousMessage.user._id === props.currentMessage.user._id ? sameUserInPrevMessage = true : sameUserInPrevMessage = false;
    }

    var messageBelongsToCurrentUser = currentUserId == props.currentMessage.user._id;
    return (
      <View>
        {!sameUserInPrevMessage && <View
          style={messageBelongsToCurrentUser ? styles.messageTimeAndNameContainerRight : styles.messageTimeAndNameContainerLeft}
        >
          
        <Bubble
          {...props}
        />
          <Text style={styles.messageTime}>{moment(props.currentMessage.createdAt).format("LT")}</Text>
          <Text style={styles.messageUsername}>{props.currentMessage.user.name}</Text>
        </View>}
      </View>
    )
  }

也把它放在 GiftedChat 组件中 renderMessage={this.renderBubble}

你如何在泡泡聊天反应原生天才聊天下呈现项目时间？

How do you render item time under bubble chat react native gifted chat?

javascript

react-native

chat

react-native-gifted-chat