Как вы визуализируете время предмета под пузырьковым чатом, реагируете на родной одаренный чат?

Question

Я использую React Native Gifted Chat. Чтобы создать пользовательский интерфейс чата, я хочу отобразить время чата и символ под пузырьковым чатом.

Я хочу сделать так:

Я пытался использовать сообщение рендеринга, но безуспешно, пожалуйста, помогите.

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.renderMessage}