最佳的React Native日期选择器库

首发于公众号 前端混合开发，欢迎关注。

今天，有各种各样的应用程序实现了某种形式的日期或时间选择器。我们用它们来设置提醒，标记日历中的特殊日期，设置闹钟，等等。

在这篇文章中，我们将浏览一下 React Native 日期选择器的可用选项，并讨论如何为你的应用选择合适的日期选择器。

从零开始构建日期选择器：逻辑、功能和考虑因素

程序员们遵循这样一个原则：“不要重复发明轮子。”这个原则归结为一个简单的事实：如果一个解决方案已经存在并且运行良好，就没有必要重新创建它。

然而，从头开始构建像日期选择器这样的功能也有其优点。这些优点包括：

• 学习经验：提供日历逻辑和用户交互原则的洞察
• 定制化:允许你集成现有库可能无法满足的特定需求。
• 理解力:提供了对日期选择器如何工作的更深入理解,这在评估和利用现有库时可能是非常宝贵的。

当确实需要从头开始构建日期选择器时,请考虑你是否需要以下功能:

• 单个或多个日期选择：允许用户选择单个日期或多个日期
• 时间选择：除了日期外，还提供选择特定时间的选项
• 日期范围：允许用户在一个范围内指定开始和结束日期
• 日历视图：显示一个视觉上吸引人的日历视图，便于选择过程，并显示可用日期
• 预定义范围：提供选择常用日期范围的选项（例如，今天，上周，月份）
• 定制化：允许用户根据应用程序的特定需求，定制日期选择器的外观、行为和功能

借助这些功能，你将能够创建一个视觉上令人惊艳的日期选择器，它优先考虑的是可访问性、功能性和定制性。

选择适合的 React Native 日期选择器库

在使用 React Native 时，经常需要使用外部核心库，因此选择正确的库非常重要。在决定是否在你正在开发的应用中包含第三方库时，考虑以下四个标准：

• GitHub 星标：如果这个包只有几个星标，我们不能确定它是否可靠，也不能期待它为我们的项目提供持续和稳定的维护
• 活跃度:如果该包有足够的 GitHub 星标但没有积极维护,则可能不适合。React Native 变化很快,所以我们希望包能与框架的最新版本最佳兼容。务必检查最后提交日期。
• 主要维护者:确定库的主要维护者也很重要。例如,如果该包缺乏 GitHub 星标,但由 React Native 社区(一个由参与创建和扩展框架的才华横溢且值得信赖的开发者组成的社区)维护,我们可以对该包比某个不知名的人的作品更有信心。
• README：一个优秀的 README 文件可以使好的库更强大。鉴于 React Native 的快速发展，这一点尤其关键。请在那里查找关于支持最新 React Native 版本的信息。

没有单一的标准可以决定你的应用程序最佳的日期选择器。你需要平等地考虑所有上述要点，同时考虑你需要为你特定的使用场景实现的特定功能。

最佳的 React Native 日期选择器

在功能开发中，并没有单一的“最佳”工具，只有不同受欢迎程度和维护状态的选项。这在 React Native 生态系统这样的大型生态系统中尤其如此。

在评估了可用的选择后,我已经将范围缩小到四个值得注意的日期选择器。让我们深入了解它们的细节。

React Native 日期时间选择器

React Native DateTimePicker 是按照 iOS 和 Android 开发指南实现的，并在底层使用了原生系统组件。

这个包也由 React Native 社区积极维护，该社区负责 React Native 中最好的开源库。在撰写本文时，最后一次提交是在 2024 年 2 月 15 日，它在 npm 上每周的下载量约为 300k+。

这个包含有详细的自述文件，并且与最新的 React Native 版本保持同步。如果你在寻找一个具有原生感觉的日期和时间选择器用于你的应用，那么它将是最有力的候选之一。

日期选择器的外观如下:

时间选择器：

这个库有很多功能，可用的属性在 README 中有详细说明。它有一个简单的安装指南和一个有用的示例使用部分。

React Native Date Picker

react-native-date-picker 允许你在 Android 和 iOS 上保持一致的外观。尽管它并不是一个流行的解决方案，但 Henning Hall 在为 Android 创建与原生 iOS 日期选择器 UI 相同的自定义日期选择器组件方面做得很好。

该软件包在 2024 年 2 月 12 日更新至 v4.3.6 版本，最后一次提交也在同月内进行。这表明了其积极的维护状态，使其成为项目的可靠且合适的选择。

以下是这个日期和时间选择器的工作方式：

在我的经验中，当构建跨平台的 React Native 应用时，一些客户在构建他们的应用的 Android 版本之前，更加关注 iOS。因此，通常有意义的做法是用类似 iOS 的外观来构建整个应用，而这个包对此非常有用。它还有一个有用的 README。

react-native-paper-dates

如果你正在使用 React Native Paper，或者正在寻找一款多功能的跨平台 Material Design 日期选择器，那么值得尝试一下 react-native-paper-dates。

这个包由 Callstack 积极维护并频繁更新，Callstack 是 React Native 的核心贡献者之一，确保了其可靠性。然而，如果你是一个对统计数据挑剔的人，你会很高兴知道这个库最近一次的更新是在 2024 年 2 月 8 日，而且在 npm 上的下载量大约有 18000+。

React Native Paper Dates 带有多种模态选项，还有一个文本输入选项。以下是单个日期选择器的样子：

你也可以选择一段日期范围：

最后，这就是多日期选择器选项的样子：

你需要安装 React Native Paper 才能使用这个库，所以如果你的项目中没有使用它，但想使用这个日期选择器，我会推荐使用他们的 Babel 插件。它会通过排除你不使用的模块来减少包的大小。

你只需要更新你的 babel 配置文件 —— babel.config.js 或 babelrc ,看起来像这样:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
};

react-native-modal-datetime-picker

此列表的最后一个是 react-native-modal-datetime-picker，这是一个开源包，其内部使用了 React Native DateTimePicker。这使得它能够支持所有的 React Native DateTimePicker 的属性，同时增强了开发者的体验：

这个库在 GitHub 上有 2.9k 颗星，npm 每周下载量超过 200k+。它的最后一次提交是在 2023 年 10 月 4 日。这表明该库维护得很好，可靠性高，适合集成到项目中。

考虑其他日期选择器库

上面突出显示的库是符合选择项目库时需要考虑的所有标准的流行选择。然而,它们的流行优势是一个重要因素。

值得注意的是，在这个生态系统中还有几个同样优秀的库，但可能星标和每周的 npm 下载量较少。在这个部分，我们将探索在决定在你的下一个项目中使用哪个库时，可以考虑的其他日期选择器库。

react-native-neat-date-picker

react-native-neat-date-picker 是一个易于使用的 React Native 日期选择器，支持 Android 和 iOS 设备，并提供丰富的自定义选项，保证了干净的用户界面：

该库的文档不像其他库那样详尽,但足够全面,可以让你入门。

截至 2023 年 4 月 9 日,react-native-neat-date-picker 已更新至 v1.4.12 版本。虽然该库的仓库可能没有太多活动,但有迹象表明维护者仍然保持活跃,并继续对包进行偶尔的维护。

react-native-daterange-picker

react-native-daterange-picker 内部使用 Moment.js 来管理日期和时间功能，提供无缝处理日期相关操作的能力。此外，该库为日历用户界面的各个方面提供了一定程度的定制化，允许你根据应用程序的设计更好地定制日期选择器的外观。

如果你之前有使用 Moment.js 的经验，那么 react-daterange-picker 对你来说应该很容易上手。另外，该仓库的 README 提供了全面的指导，以便快速高效地上手。

该库在 GitHub 上有 120 个星标,最后一次更新是在 2020 年 12 月 16 日。因此,它仍然使用 Moment.js 的 2.27.0 版本。虽然该库应该仍然能够满足你的需求,但在为你的项目选择它之前,需要考虑这一点。

react-native-date-range-picker

react-native-date-range-picker 更多的是作为一个插件而非独立的库。它专为与 react-native-calendars 库集成而设计。

这个包扩展了 react-native-calendars 的功能，增加了日期选择器功能。因此，在使用 react-native-date-range-picker 之前，你需要先安装 react-native-calendars：

该软件包最后一次更新是在 2018 年 5 月 27 日，它在 GitHub 上获得了 99 颗星。然而，值得注意的是，它所构建的库，react-native-calendars，在 GitHub 上获得了超过 9K 的星，并且正在积极维护。

总结

在上述的日期选择器选项中，每个都有其独特的优点和缺点。你的选择应基于你的应用程序的特定需求和目标。

也就是说，如果你在寻找一个得到积极维护和支持的包，可以帮助你实现原生 iOS 和 Android 应用的外观和感觉，你可能需要考虑 React Native DateTimePicker。它不仅提供了原生用户体验，而且还得到了出色的 React Native 社区的支持。

交流

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。