如何使持续时间选择器做出原生反应

Question

我正在尝试构建一个持续时间选择器：它看起来像一个简单的 ios 时间选择器，但它会从 0 分 0 秒开始，一直到 23 小时 59 分钟。我尝试使用普通的 DateTimePickers（react 原生日期选择器），并使用 24 小时格式，这可以工作。问题是ios不支持24小时格式。

PS：从图中可以看到，12 小时格式是从 1 小时 0 分钟开始的，所以如果有人想花 20 分钟，那就不好了。

看起来像这样，但采用 24 小时格式，从 0 小时 0 分钟开始，一直到 23 又 59 分钟。

Answer 1

我找到了一种实现此目的的方法：我使用了另一个库（react-native-modal-datetime-picker），正如docs中所述，你不能在ios上设置24小时格式，但你可以做的是设置

locale="en_GB"

使用它，你现在可以实现这样的外观：

如您所见，您可以选择 0 小时的偶数时间。

要获取分钟，在 Date 对象上，您将获得作为

onConfirm

的支柱，请执行以下操作：

const minutes = date.getMinutes() + date.getHours() * 60;
console.log(minutes);

最后，如果您希望 DurationPicker 从 0 0 开始，请将属性

date

设置为 0 小时 0 分钟的日期。

最后它看起来像这样：

<DateTimePicker
  mode='time'
  date={new Date(new Date().setHours(0, 0, 0, 0))}
  locale='en_GB'
  {...props}
/>

Answer 2

我一直在寻找类似的东西，发现这个包或多或少可以工作