如何从 Firestore 获取本地反应的日期？答案

【问题标题】：How to get date in react native from Firestore?如何从 Firestore 获取本地反应的日期？
【发布时间】：2021-06-06 00:27:47
【问题描述】：

我想以 dd/mm/yyyy 格式在本机反应中显示来自 Firestore 的日期。我已从另一个屏幕设置日期这是我设置日期的 screen1 的代码：

 const [date, setDate] = useState(new Date());
  const [mode, setMode] = useState("date");
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === "ios");
    setDate(currentDate);
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode("date");
  };
return (
    <View
      style={{
        marginTop: "15%",
        height: "100%",
        width: "100%",
      }}>
 <Button onPress={showDatepicker} title="Select Date" />
      {show && (
        <DateTimePicker
          style={{
            alignSelf: "center",
            alignContent: "center",
            width: "50%",
            marginLeft: "20%",
            marginTop: "8%",
          }}
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
<Button
title:'save'
onPress:{
           dbRef.doc().set({
              title: date,
              sub: service,
              key: new Date(),
            });}/>

这是我在 screen2 中检索数据的方式

<FlatList
          ListEmptyComponent={<Text>Nothing Available</Text>}
          style={{ padding: 10, backgroundColor: "#D8E0E5E6" }}
          data={exampleState}
          keyExtractor={(item) => item.key}
          renderItem={({ item }) => (
            <Card
              title={item.title.seconds.toString()}
              sub={item.sub}
              // onPress={() => {}}
            />
          )}
        />

我看到的是基本上以秒为单位，我希望它采用 dd/mm/yyyy 格式 Firestore 截图

提前感谢您的帮助。

【问题讨论】：

标签： react-native google-cloud-firestore

【解决方案1】：

你只需要格式化你从firestore得到的日期：

<FlatList
          ListEmptyComponent={<Text>Nothing Available</Text>}
          style={{ padding: 10, backgroundColor: "#D8E0E5E6" }}
          data={exampleState}
          keyExtractor={(item) => item.key}
          renderItem={({ item }) => (
            <Card
              title={new Date(item.title).toLocaleString()}
              sub={item.sub}
              // onPress={() => {}}
            />
          )}
        />

对于其他格式选项，请使用 moment.js 等库。

然后你可以使用这样的东西：

<FlatList
          ListEmptyComponent={<Text>Nothing Available</Text>}
          style={{ padding: 10, backgroundColor: "#D8E0E5E6" }}
          data={exampleState}
          keyExtractor={(item) => item.key}
          renderItem={({ item }) => (
            <Card
              title={moment(item.title).format('YYYY.MM.DD')}
              sub={item.sub}
              // onPress={() => {}}
            />
          )}
        />

【讨论】：

嘿@Tarik Huber 感谢您的回复。我应用了你所说的，但结果是 Invalid date。
我通过在 screen1 中使用上传日期的时刻解决了这个问题。
在上传已格式化的日期时请考虑，如果您的应用在不同时区使用，您可能会遇到麻烦。我宁愿建议在显示时使用答案第二部分中所示的时刻。

【解决方案2】：

这是我在 screen1 中将日期设置为 Firestore 时所做的

<Button
title:'save'
onPress:{
           dbRef.doc().set({
              title: moment(date).format("DD.MM.YYYY"),
              sub: service,
              key: new Date(),
            });}/>

【讨论】：