在移动应用中,经常可以看到页面表单上的日期选择器包含一个或多个日期字段。无论是一个人的出生日期、飞行时间、证书的到期日,还是会议的预定日期,你都要确保用户提供的是一个有效日期。此外,日期选择器是一个有用的补充,它可以在显示日历的同时显示一个日期输入字段,使应用程序用户更容易安排活动或填写登记表。
大多数主要的软件包将用户的日期输入类型降级为文本输入,导致UI渲染和数据格式化的问题。因此,当用户输入文本时,会出现数据的格式化问题。例如,全球不同日期格式的用户信息的缺乏会导致数据处理的困难,导致应用程序中出现错误信息。
为React Native日期选择器选择正确的库
当使用React Native操作时,应用一个外部的、中间的库经常是至关重要的,所以在选择一个完美的库时要考虑周到。当决定是否在你正在开发的应用程序中包含一个第三方库时,请考虑以下四个标准。GitHub 星级,活动,主要维护者,以及README文件。
为什么使用React Native日期选择器?
最近几天,react-native升级了其最新的0.69版本,但根据这个版本,所有的包都没有升级。在搜索日期选择器库的时候,有些库已经过时了。有些包按照最近的react-native版本是不可维护的,所以由于这个问题,我们必须使用自定义日期选择器来寻找不同的日期选择器和一个好的日期选择器。
两者都可以在android以及iOS上使用。在实现react-native-date picker库的过程中,它显示了一个错误,即android DatePickerAndroid已经从React Native中移除。我们发现该解决方案被删除,并与DatePickerIos合并,这样它就只能在iOS上工作,而不能在android上工作。
使用@react-native-community/datetimepicker也不能在本地基础上工作,因为本地基础使用的是@react-native-community/datetimepicker包的低版本。由于这些问题,我使用了一个近乎更新的库,即react-native-date-picker,并为iOS和android的UI创建了一个自定义模态。
安装
1.包可以用npm或yarn下载。
npm install react-native-date-picker
yarn add react-native-date-picker
2.设置pods
cd ios && pod install
3.重新创建项目。
npm react-native run-android
npm react-native run-ios
让我们 通过导入必要的包和参数等开始实施。

在导入时,我们必须从 react-native-date-picker 包中导入 DatePicker。
自定义日期选择器组件
在react-native-date-picker中,我们必须在我们的自定义日期选择器中设置获取日期视图的模式,日期道具总是最近的日期,当我们选择一个新的日期时,它被替换成所选的日期。
自定义模态组件
在UI Prospective中,我们使用了模态来在我们的安卓和IOS应用程序中显示相同的UI,而模态并不是由该库提供的。

自定义日期选择器的完整组件

样式组件

为了获得更好的UI体验,我们在这里使用了自定义样式。
下面是一些截图。

使用自定义组件的支持。
- 不需要在项目中到处使用。
- 给予更好的理解。
- 让用户界面变得友好