前言
在移动端开发过程中，表单的存在是不可避免的。React Native 是一款跨平台的框架，在实现表单时也要考虑到不同平台之间的差异。react-native-formly-templates-md 是一款基于 React Native 的表单组件库，它提供了多种表单元素和布局，可以快速帮助我们构建美观和易于使用的表单。
安装
首先，我们需要安装 react-native-formly 和 react-native-formly-templates-md 两个库
npm install --save react-native-formly react-native-formly-templates-md
由于 react-native-formly-templates-md 采用 Material Design 风格设计，因此需要在我们的项目中安装 Material Design 相关的组件。在项目的根目录下，运行以下命令安装依赖
npm install react-native-vector-icons react-native-paper
示例
下面我们来看一下，如何在业务代码中使用 react-native-formly-templates-md 渲染一个登录表单
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ ---------- ---- ----------------------
------ --------- ---- -----------------------------------
----- ------ - -
-
---- -----------
----- -------
---------------- -
------ ------
------------ ---------
--
--
-
---- -----------
----- -------
---------------- -
------ -----
------------ --------
---------------- -----
--
--
--
----- ----------- - -- -- -
----- -------- ---------------- --- ------------------ -- ---
-----------
---------------
---------------------
---------------- -- --------------------
-------------- ------ ----- ------ --------- --
--
-------
--
------ ------- ------------上面的代码中，我们定义了一个 config 对象，它包含了两个输入框的配置：用户名和密码，并使用 <FormlyForm> 组件将这些表单元素渲染出来。最后，我们将登录按钮的标题和颜色通过 buttonProps 传递给 <FormlyForm> 组件渲染。
配置项
key
用于唯一标识当前表单元素，在 form 提交时会用到。
type
表单元素类型，决定了表单元素的内容展示和交互方式。常用的表单元素类型有以下几种
- text
- textarea
- select
- radio
- checkbox
- datepicker
- timepicker
templateOptions
该对象包含了表单元素的一些基本属性，用于渲染表单元素以及表单元素的验证逻辑。常用的属性有以下几种：
- label：表单元素的标题
- placeholder：表单元素的提示文案
- required：表单元素是否必填
- options：用于 select、radio 等类型的表单元素，表示该表单元素支持的选项列表
- validator：表单元素的验证逻辑，可以是一个正则表达式或者一个函数
自定义模板
除了使用 react-native-formly-templates-md 提供的模板，我们还可以自定义模板。下面是一个自定义的 Select 组件模板
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ - ---- - ---- ---------------------
----- -------------------- - -- ---------- ------- -- -- -
----- - ------- ------- - - ----------
----- ------- - ---------------- -- ------------------
------ -
----- -------- ------------- - ---
-----------------
--------
------------ ------- - ----- - ----------
------------ --
------------- --
---------------- ---
------------------ ---
--
----------- -- ----------------------
-
----------
----------------------------------
--------- -- ---------- ------------------- ---
--
----- -------- ---------------- - ---
-------------------------- -- ---------------------------------
-------
-------------------
-------- -- ----- -------- ------ ----- -----------------------------
-------
--
--
------ ------- ---------------------上面的代码中，我们重写了一个 Select 组件模板，它在原有组件模板的基础上，添加了一些样式和针对 formState 的逻辑。我们可以将该模板引入到我们的业务代码中，在 config 中为 Select 元素配置该模板即可：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ ---------- ---- ----------------------
------ --------- ---- -----------------------------------
------ -------------------- ---- -------------------------
----- ------ - -
-
---- ----------
----- ---------
---------------- -
------ -----
-------- -
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
--
--
--------- ---------------------
--
--
----- ---------- - -- -- -
----- -------- ---------------- --- ------------------ -- ---
----------- --------------- --------------------- ---------------- -- -------------------- --
-------
--总结
react-native-formly-templates-md 是一款非常实用的 React Native 表单组件库，它提供了多种表单元素和布局，可以满足我们日常开发需要。在使用该库的过程中，我们除了需要理解每个配置项的含义外，还可以自定义组件模板，以满足我们业务逻辑的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572ca81e8991b448e8f82