React Native动态表单 新框架 新设计

本文已授权微信公众号【陈不2】发布

简述

在脚本语言里，设计一个动态表单，确实比java要容易的多，下面介绍一个动态表单框架，在阅读了网络很多开源的动态表单设计源码之后，我们决定自己动手做一个，使用了ES6的特性，也解决了我们一些问题，在动态扩展这个设计上要比其他的框架要好很多，欢迎参考或者吐槽，如有不对的设计欢迎指正。

项目 概述

React Native动态生成表单项目，根据特定的领域模型，自动匹配UI组件，自动映射数据。支持动态扩展组件。

架构图

framwork.png

整体结构分为四大模块，如下

Form

用于接收json数据，基本数据模型已经定义好如下：

        {
            type: "input",  //定义类型，输入框
            key: "username", //定义key，通过该key可以获取到该组件对象，方便自定义操作
            title: "用户名", //组件标题
            icon: 'userName', //图片名称
            placeholder: '请输入用户名' //输入框提示
        }

当然你可以自定义模型，目前唯一的约束就是type与key，必须在数据模型中存在。

ComponentFactory

用于注册自定义的组件，给Form层提供组件，

ComponentBuilder

用于组件的构建，构建完后会自动注册组件到ComponentFactory中，往Form中添加新的组件时，就要完成该层的创建。

Components

React Native中自定义组件，都是继承自React.Component，都是一些组合组件。

计划

• 添加到npm仓库中
• 数据通过async-validator校验
• 添加选择框，日期框，开关按钮等常用组件。

用例

export default class App extends Component<Props> {
  render() {

    let items =  [
        {
            type: "input",
            key: "username",
            title: "用户名",
            icon: 'userName',
            placeholder: '请输入用户名'
        },
        {
            type: "input",
            key: "password",
            title: "密码",
            icon: 'password',
            placeholder: '请输入密码'
        },
    ];

    return (
      <View style={styles.container}>
        <Form ref={(c) => {this.form = c;}} items={items}/>
      </View>
    );
  }
}

上面是基本使用方法，如何获取里面输入框里面的值呢，如下：

  onPress() {
        const value = this.form.getValue();
        alert(JSON.stringify(value));
    }

只需要调用 form表单的getValue方法，便可以返回如下：

{
    "username": "zhang" ,
    "password": "234"
}

获取姓名对应的组件如下：

const input = this.form.getComponentByKey("username");

等等...

License

DynamicForm is released under the Apache License.

项目地址

DynamicForm