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

作者:i校长 | 链接
https://www.jianshu.com/p/4729e9711046

简述

在脚本语言里,设计一个动态表单,确实比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

 

   长按(或扫码)识别二维码,关注~

陈不二,喜欢技术,欢迎一块交流学习~
大家可以关注我的个人博客:
http://www.chenbu2.com
简书地址:
https://www.jianshu.com/u/f4874eb81c5b
GitHub地址:
https://github.com/ChenBu2
爱学啊合作讲师:
http://www.ixuea.com/
公众号:
陈不2
技术交流QQ群:
858499698

博客迁移

大家好,由于数据库异常,原博客地址:www.chensan6.com

迁移至:www.chenbu2.com;

同时不影响访问,谢谢~

 

陈不二,喜欢技术,欢迎一块交流学习~
大家可以关注我的个人博客:
http://www.chenbu2.com
简书地址:
https://www.jianshu.com/u/f4874eb81c5b
GitHub地址:
https://github.com/ChenBu2
爱学啊合作讲师:
http://www.ixuea.com/
公众号:
陈不二
技术交流QQ群:
858499698