Question

我正在尝试实现一个功能，当用户按下锁定按钮时，项目的 isReserved 状态变为真。完成后，将在 Firestore 中创建另外两个状态，startDate 和 expiryDate。在应用程序中，该项目有一个进度条，其进度值介于 0 和 1 之间。我需要指定 expiryDate 是从 startDate 开始的 72 小时，它应该映射到进度条。一旦进度值减小到 0，项目的 isReserved 状态在 firestore 中反转回 false。我怎样才能做到这一点？

firestore 文档有以下数据

reserveDB.doc(item.productID).set({
        productID: item.productID,
        image: item.image,
        price: item.price,
        productName: item.productName,
        isReserved: true,
        startDate: Date.now(), // time saved as timestamp
        expiryDate: event.setHours(72), // time saved as timestamp
      });

这是来自 react-native-paper 的进度条。如上所述，进度值介于 0 和 1 之间。我想倒计时从 expiryDate 到 startDate 的时间并将其映射到 1 和 0 之间的值。

<ProgressBar indeterminate={false} progress={0.8} color={theme.secondary}/>

此按钮可以从保留列表中删除该项目

<Button
        style={{
          backgroundColor: theme.secondary,
          width: 40,
          height: 40,
          marginHorizontal: 4,
        }}
        color={theme.onSecondary}
        mode="contained"
        onPress={() => reserveProduct(item)}>
        {item.isReserved === false ? (
          <Icon
            name={'unlock'}
            color={theme.onSecondary}
            style={{backgroundColor: 'transparent'}}
            size={20}
          />
        ) : (
          <Icon
            name={'lock'}
            color={theme.onSecondary}
            style={{backgroundColor: 'transparent'}}
            size={20}
          />
        )}
      </Button>

我会添加更多代码，但我还没有尝试其余的想法。

如何在 React Native 中实现以下功能？

0 个答案: