首页 > 解决方案 > 如何显示来自云 Firebase 的“时间戳”值以将本机反应为日期或字符串?

问题描述

在此处输入图像描述

这是我想进入我的反应原生应用程序的时间戳值。我可以把它当作一个字符串并这样显示,但我被要求它必须是云中的时间戳。并可能将其作为 react native 项目中的日期。我该怎么做呢?我可以显示其他字段,例如 adSoyad,完全没有问题。

还有一件事,我如何显示来自这个云系统的图片?顺便说一下,这是我的 app.js:

import React, {Component} from 'react';
import {
Platform,
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
Button,
StatusBar,
} from 'react-native';
import firebase from '@react-native-firebase/app'
import firestore from '@react-native-firebase/firestore'
import { format } from "date-fns";
class App extends Component {
state = {
tablo: {
adSoyad: "",
yas: "",
dogumTarihi: "",
mezunDurumu: "",

}
}
constructor(props) {
super(props);
this.getUser();
this.subscriber=firestore().collection("tablo").doc
('J6mAav1kjkcjrMupeOqX').onSnapshot(doc => {
this.setState({
tablo: {
adSoyad: doc.data().adSoyad,
yas: doc.data().yas,
dogumTarihi: doc.data().dogumTarihi,
mezunDurumu:doc.data().mezunDurumu,

}
}
)
});
}
getUser= async() => {
const userDocument= await firestore().collection("tablolar").doc
("J6mAav1kjkcjrMupeOqX").get()
console.log(userDocument)
}
render() {
  var mezund;
  var dtarih=toString(this.state.tablo.dogumTarihi);
  console.log(dtarih);
  //this doesn't work though how do we do this??? it gives undefined.
  if(this.state.tablo.mezunDurumu==false){mezund="Mezun Değil"}
  else if(this.state.tablo.mezunDurumu=true){mezund="mezun"}
return (
<View>
  
<Text>Ad Soyad: {this.state.tablo.adSoyad}</Text>
<Text>Yaş: {this.state.tablo.yas}</Text>
<Text>Doğum Tarihi: {dtarih}</Text>
<Text>Mezun Durumu: {mezund}</Text>

</View>
);
}
}
export default App

标签: androidfirebasereact-nativegoogle-cloud-firestorereact-native-android

解决方案


要将您的时间戳转换为日期,请尝试使用 .toString() 方法。(如果 this.state.tablo.dogumTarihi 是你的时间戳,那么 this.state.tablo.dogumTarihi.toString())。

https://firebase.google.com/docs/reference/android/com/google/firebase/Timestamp#toString()

但是,您最好将其设置为 Date、.toDate(),如链接的文档中所示,并从那里操作它的格式。

至于显示图像,您应该为此使用 firebase 存储,而不是 firestore。在 firebase 文档中查找定价和可用性原因。通常所做的是将文件(例如图像)存储在某个 URL x 的 firebase 存储中,而 x 存储在 firestore 中,以便在加载文档时可以访问存储图像的 URL。

代码(从https://dev.to/clintdev/simple-firebase-image-uploader-display-with-reactjs-3aoo复制和粘贴)用于存储图像并获取它的下载 URL 以存储在 firestore 文档中或供使用在页面上。

    storage
      .ref("images")
      .child(image.name)
      .getDownloadURL()
      .then(url => {
        this.setState({ url });
      });

    <img
      src={this.state.url || "https://via.placeholder.com/400x300"}
      alt="Uploaded Images"
      height="300"
      width="400"
    />

还有一个可能值得研究的 react-native-firebase 项目:https ://rnfirebase.io/ 。

这是我的第一个 Stack Overflow 答案,如果我违反任何规则,请告诉我!


推荐阅读