在进行移动端开发过程中，我们会经常遇到需要快速构建表单的情况。然而，手写表单控件往往十分繁琐，而且容易出错。在这种情况下，我们可以尝试使用 react-native-formly 这个 npm 包来快速构建表单。
什么是 react-native-formly？
react-native-formly 是一个 react-native 组件库，主要用于构建表单控件。它提供了大量的表单控件和样式，并且支持自定义表单项。最重要的是，它可以让我们快速创建出美观且易于使用的表单界面。
如何安装 react-native-formly？
要使用 react-native-formly，我们首先需要安装它。我们可以使用 npm 安装：
npm install react-native-formly
如何使用 react-native-formly？
在这里，我们将演示如何使用 react-native-formly 构建一个简单的登录表单。首先，我们需要定义表单项的结构和属性。我们可以使用一个数组来存储表单项，每个表单项都是一个对象，包含以下属性：
key：表单项的键名。type：表单项的类型，可以是input、password、picker等。template：表单项的模板，用于渲染表单项。config：表单项的配置，包括样式、默认值等。
在本例中，我们定义了两个表单项——用户名和密码，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ - ------ - ---- ----------------------
----- ------ - -
-
---- -----------
----- --------
--------- -- ----- -- -- -
------ -
------
----------------------
---------- ---------- --
-------
--
--
------- -
------ ----------
-
--
-
---- -----------
----- -----------
--------- -- ----- -- -- -
------ -
------
----------------------
---------- ---------- ---------------------- --
-------
--
--
------- -
------ ----------
-
-
--接下来，我们需要在页面中渲染表单。我们可以使用 <Formly.Form> 组件来渲染表单，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------- ------ - ---- ---------------
------ - ------ - ---- ----------------------
----- ------ - -
-- -----
--
----- --------- ------- --------------- -
----- - -
------- --
--
------------ - -- -- -
-- ------
--
-------- -
----- - ------ - - -----------
------ -
----- -------- ----- - ---
------------
---------------
---------------
---------------- -- --------------- ------ ---
--
------- ------------- --------------------------- --
-------
--
-
-
------ ------- ----------在上面的代码中，我们通过 setState 来更新表单数据，并且用一个按钮来提交表单。现在，我们已经完成了登录表单的构建。
自定义表单项
除了已经提供的表单项以外，我们还可以通过自定义表单项来满足特殊的需求。我们只需要定义一个函数组件，然后传入表单项即可。下面，我们演示如何自定义一个日期选择器表单项。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ----------------- ------------- - ---- ---------------
------ - ------ - ---- ----------------------
----- ---------- ------- --------------- -
----- - -
----- --- ------
--
------------ - ---- -- -
--------------- ---- ---
--------------------------------
--
-------- -
----- - ---- - - -----------
------ -
------
----------------- ---------------------------
-----------------------------------
-------------------
-------------- ----------- -------------------------------- --
-------
--
-
-
----------------------- - -
---------- ------- - -----
--
----- ------ - -
-
---- -----------
----- -------
--------- -- ----- -- -- -
------ ----------- ------------- ---
-
-
--在上面的代码中，我们定义了一个 DatePicker 组件，它使用了 DatePickerIOS 来作为日期选择器。我们还可以通过 dateLabel 属性来设置日期选择器的标题。在 fields 数组中，我们定义了一个名为 birthday 的表单项，并将它的类型设置为 date，这样 react-native-formly 就会自动通过 DatePicker 组件来渲染它。
总结
在本文中，我们介绍了 react-native-formly 这个 npm 包，并演示了如何使用它来快速构建表单控件。在实际开发中，我们可以根据自己的需求扩展表单控件，从而提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cac81e8991b448e61aa