移动端表单渲染器

基于 form-render 1.x + fr-generator 2.x + formily 2.x + antd-mobile 2.x 的移动端表单渲染

安装

1npm i -S @fescotech/form-render-antd-mobile --registry http://47.94.139.51:8081/nexus/repository/fescotech-npm/

使用

1import React from "react";
2import FormRenderMobile from "@fescotech/form-render-antd-mobile";
3
4const schema = {
5  type: "object",
6  properties: {
7    "input_HUxYX-": {
8      title: "输入框",
9      type: "string",
10      required: true,
11    },
12  },
13};
14
15const App = () => {
16  return <FormRenderMobile schema={schema} />;
17};
18
19export default App;

三方组件/自定义组件接入

接入现成组件库的话，主要使用 @formily/react 中的 connect/mapProps/mapReadPretty API 来无侵入接入 formily 体系

如果 react 组件本身支持 value/onChange 这样的双向绑定约定，则只需要使用 connect 和 mapProps 即可无侵接入 formily，实现

connect 的入参传入第一个参数是要接入的组件，后面的参数都是组件映射器，每个映射器都是一个函数 IComponentMapper，此时返回的最终组件即为响应式表单组件

1interface IComponentMapper<T extends React.FC> {
2  (target: T): React.FC;
3}
4interface connect<T extends React.FC> {
5  (target: T, ...args: IComponentMapper<T>[]): React.FC;
6}

1const Input = connect(
2  InputRaw,
3  mapProps(
4    {
5      title: true,
6      description: "extra",
7      required: true,
8      validateStatus: true,
9    },
10    (props, field) => {
11      return {
12        ...props,
13        errors: field.errors,
14      };
15    }
16  )
17);

更多用法见 formily/react

本地开发调试

需要配合 form-preview-mobile 项目联调，具体步骤参见 调试组件库

打包发布

1yarn build

发布时按照前端规范中的私服发布流程进行发布