时间戳

首页 > 解决方案 > 如何从 Firestore 获取本地反应的日期？

react-native - 如何从 Firestore 获取本地反应的日期？

问题描述

我想以 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-nativegoogle-cloud-firestore

解决方案

你只需要格式化你得到的日期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={() => {}}
            />
          )}
        />

推荐阅读