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