React-Native 是一个流行的跨平台应用开发框架，它允许开发者使用 JavaScript 和 React 来构建 iOS 和 Android 应用。在 React-Native 中，我们可以使用 iOS 自带的日期选择器来让用户选择日期。本文将介绍如何在 React-Native 中使用 iOS 自带的日期选择器，包括如何设置日期选择器的样式和如何获取用户选择的日期。
设置日期选择器的样式
在 React-Native 中，我们可以使用 DatePickerIOS 组件来使用 iOS 自带的日期选择器。要使用 DatePickerIOS，我们需要引入它：
import React, { useState } from 'react';
import { DatePickerIOS } from 'react-native';然后，我们可以在组件中使用 DatePickerIOS，并设置它的样式和初始日期：
-- -------------------- ---- -------
----- ------------ - -- -- -
----- ------ -------- - ------------ --------
------ -
--------------
-----------
----------------------
-----------
-------- ---------- -- --
--
--
--在上面的代码中，我们使用 useState 钩子来定义一个名为 date 的状态变量，并将其初始值设置为当前日期。然后，我们在 DatePickerIOS 中使用 date 变量来设置初始日期，并在用户选择日期时更新 date 变量的值。我们还设置了 mode 属性为 "date"，以便只显示日期选择器。最后，我们使用 style 属性来设置日期选择器的样式。
获取用户选择的日期
在 React-Native 中，我们可以使用 onDateChange 属性来获取用户选择的日期。onDateChange 是一个回调函数，它会在用户选择日期时被调用。我们可以将这个回调函数传递给 DatePickerIOS，并在函数中获取用户选择的日期：
-- -------------------- ---- -------
----- ------------ - -- -- -
----- ------ -------- - ------------ --------
----- ---------------- - --------- -- -
-----------------
---------------------
--
------ -
--------------
-----------
-------------------------------
-----------
-------- ---------- -- --
--
--
--在上面的代码中，我们定义了一个名为 handleDateChange 的回调函数，它会在用户选择日期时被调用。在函数中，我们首先使用 setDate 函数来更新 date 变量的值，然后使用 console.log 函数将用户选择的日期打印到控制台中。
示例代码
下面是一个完整的示例代码，它演示了如何在 React-Native 中使用 iOS 自带的日期选择器：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ----- -------------- ---------- - ---- ---------------
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
--
---
----- ------------ - -- -- -
----- ------ -------- - ------------ --------
----- ---------------- - --------- -- -
-----------------
---------------------
--
------ -
--------------
-----------
-------------------------------
-----------
-------- ---------- -- --
--
--
--
----- --- - -- -- -
------ -
----- -------------------------
------------ - ------------
------------- --
-------
--
--
------ ------- ----在上面的代码中，我们定义了一个名为 MyDatePicker 的组件，它包含了一个 DatePickerIOS 组件。我们还定义了一个名为 App 的组件，它包含了一个 MyDatePicker 组件和一个文本标签。最后，我们导出了 App 组件，以便在应用中使用它。
总结
本文介绍了如何在 React-Native 中使用 iOS 自带的日期选择器。我们学习了如何设置日期选择器的样式和如何获取用户选择的日期。希望本文能够对你有所帮助，让你更好地使用 React-Native 开发 iOS 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c04b48add4f0e0ffa17e5c