4

我在我的应用程序中使用了react-native-gifted-chat来添加聊天功能。目前我能够正确发送和接收来自 firebase 的消息。但是，问题是react-native-gifted-chat总是显示 12:00 AM 的消息发送时间。这是因为它无法将 firebase 时间戳转换为时间。谁能帮我解决一下？

这是我使用GiftedChat组件的方式：

<GiftedChat
  messages={this.props.messages}
  renderUsernameOnMessage={true}
  onSend={messages => this.onSend(messages)}
  alwaysShowSend={true}
  textInputStyle={styles.composer}
  minComposerHeight={40}
  minInputToolbarHeight={60}
  user={{
    _id: this.props.account ?.user ?.uid,
    name: this.props.account ?.data ?.fullName,
    avatar: this.props.account ?.data ?.avatar
  }}
/>

以下是我用于在 firestore 中保存消息的代码：

export const sendMessage = (message, groupId) => {
  return async () => {
    await firestore().collection('groupMessages').doc(groupId).collection('messages').doc(message._id).set(message).catch((e) => {
      throw {message: e.message.replace(`[${e.code}] `, '')}
    });
  }
}

在上面的代码中是有天赋的聊天消息，message其中包含属性：_id、、text和。createdAtuser

以下是消息在 firebase 中的存储方式：

Firebase 消息结构

当我显示消息时：

信息

4

3 回答 3

4

最后用临时解决方案完成。renderTime我通过按道具将时间渲染为自定义来解决它。

<GiftedChat
  ...
  renderTime={(props) => (
    <View style={props.containerStyle}>
      <CText size={10} style={{marginHorizontal: 10, marginBottom: 5}} bold color={props.position === "left" ? 'gray' : 'white'}>
        {`${props.currentMessage.createdAt.toDate().toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}`}
      </CText>
    </View>
  )}
  ...
  ...
/>

我已转换createdAt为日期，然后以hh:mm AM/PM格式获取它。

注意：这只是临时解决方案，如果您在本地存储消息并显示消息，则可能无法正常工作，因为 GiftedChat 生成的消息字段createdAt是纯 javascript 日期对象，没有任何toDate()功能，因此您可能会收到此类错误。

Uncaught TypeError: (intermediate value).toDate 不是 :1:12 的函数

于 2019-12-07T07:20:50.773 回答
3

根据我个人的经验，解决这个问题的最简单方法是在将数据保存到using方法之前将createdAttime 属性转换为。生成具有不同时间属性格式的对象，即. 但是当这个属性被保存到里面时，它会显示在那里，当我们从中获取数据时，会返回不同格式的属性，即. 这会导致问题，应用程序始终显示当前日期和时间。因此，简单的解决方案是在将日期格式保存到 firebase 之前更改日期格式：millisecondsfirebaseDate.parse()react-native-gifted-chatmessage"createdAt": 2020-05-08T06:56:44.698ZfirebasetimestampfirebasecreatedAt"createdAt": {"_nanoseconds": 943000000, "_seconds": 1588921685}12:00 AM

const saveMessage = async (message) => {
    const temp = message[0];

    const createdAt = Date.parse(temp.createdAt); //<--- add this line

    const a = await db.add({ ...temp, createdAt });

    //---------your other code--------//
  }

现在，您的应用将显示正确的日期和时间，您将从firebase.

于 2020-05-08T07:17:31.407 回答
1

我用这个想法解决了这个问题也可以使用。

firestore()
      .collection('Messages')
      .where('experienceId', '==', experienceId)
      .orderBy('createdAt', 'desc')
      .get()
      .then(function (querySnapshot) {
        var messagesAll = [];
        querySnapshot.forEach(function (documentSnapshot) {
          messagesAll.push({
            _id: documentSnapshot.data()._id,
            text: documentSnapshot.data().text,
            createdAt: new Date(documentSnapshot.data().createdAt.toDate()),
            user: documentSnapshot.data().user,
          });
        });
        setMessages(messagesAll);
      });
于 2020-09-30T12:05:36.870 回答