前言
在 React Native 开发中，我们经常要使用到表单元素，例如文本框、单选框、复选框等等。然而，实现相对复杂的表单比如输入验证，表单联动等功能需要花费大量时间和精力。因此，有很多前端工程师借助第三方库解决这个问题，simple-react-native-form 就是这样的一个库。
介绍
simple-react-native-form 是一个 React Native 表单组件库，它能够方便地实现基本的表单元素渲染和表单验证。它通过自定义的表单控件，深度解耦和业务逻辑，组件维护性高，易于扩展。
安装
在 React Native 项目中，使用 npm 安装 simple-react-native-form：
npm i simple-react-native-form --save
使用
渲染一个表单
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ----- ----- ---- ---------------
------ ------ ------ ---- ---------------------------
----- ----- - -- -- -
----- -------- - ---------- ---------- -- -
-- ------
----------------------
------------
--
------ -
--------------
------
----- --------------------
------ --------------- ----------- --
------ --------------- ---------- --------------- --
-----------------
-------
-------
---------------
--
--
------ ------- ------常用组件
simple-react-native-form 封装了一些表单控件，包括 Input、Select、DatePicker 等。
<Field name="username" label="用户名" component={Input} />
<Field name="gender" label="性别" component={Select} options={[
{ value: 'man', label: '男' },
{ value: 'woman', label: '女' },
]} />
<Field name="birthday" label="生日" component={DatePicker} />表单验证
simple-react-native-form 提供了方便的表单验证功能，支持自定义规则验证、异步验证等。
<Field name="username" label="用户名"
rules={[{ pattern: /^[\w_]{6,16}$/, message: '请输入6~16个字母、数字或下划线' }]}
/>动态表单
通过 simple-react-native-form 可以很方便地实现动态表单功能，例如在点击 “添加” 按钮后，动态添加表单项。
-- -------------------- ---- -------
----- -------- ---------- - ----------
- ----- ----------- ------ ----- --
---
----- ---------- - -- -- -
--------------------- - ----- -------- ------ ---- ----
--
-- ---
----- --------------------
------------------- ------- -- -
------ ---------- ----------- ------------- --
---
------- --------------------------------
-------总结
simple-react-native-form 是一个非常实用的 React Native 表单组件库，它为我们提供了方便的表单元素渲染、表单验证、动态表单等功能。在实践中，我们应该灵活应用 simple-react-native-form 来提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581a81e8991b448d5413