open-index/open-npm huggingface dataset:
npm package: @fescotech/form-render-antd-mobile
Description: 基于 form-render 1.x + fr-generator 2.x + formily 2.x + antd-mobile 2.x 的移动端表单渲染
Latest version: 0.3.292

# 移动端表单渲染器

基于 form-render 1.x + fr-generator 2.x + formily 2.x + antd-mobile 2.x 的移动端表单渲染

## 安装

```bash
npm i -S @fescotech/form-render-antd-mobile --registry http://47.94.139.51:8081/nexus/repository/fescotech-npm/
```

## 使用

```js
import React from "react";
import FormRenderMobile from "@fescotech/form-render-antd-mobile";

const schema = {
  type: "object",
  properties: {
    "input_HUxYX-": {
      title: "输入框",
      type: "string",
      required: true,
    },
  },
};

const App = () => {
  return <FormRenderMobile schema={schema} />;
};

export default App;
```

## 三方组件/自定义组件接入

接入现成组件库的话，主要使用 `@formily/react` 中的 `connect/mapProps/mapReadPretty` API 来无侵入接入 formily 体系

如果 react 组件本身支持 `value/onChange` 这样的双向绑定约定，则只需要使用 `connect` 和 `mapProps` 即可无侵接入 formily，实现

`connect` 的入参传入第一个参数是要接入的组件，后面的参数都是组件映射器，每个映射器都是一个函数 `IComponentMapper`，此时返回的最终组件即为响应式表单组件

```ts
interface IComponentMapper<T extends React.FC> {
  (target: T): React.FC;
}
interface connect<T extends React.FC> {
  (target: T, ...args: IComponentMapper<T>[]): React.FC;
}
```

```js
const Input = connect(
  InputRaw,
  mapProps(
    {
      title: true,
      description: "extra",
      required: true,
      validateStatus: true,
    },
    (props, field) => {
      return {
        ...props,
        errors: field.errors,
      };
    }
  )
);
```

更多用法见 [formily/react](https://react.formilyjs.org/guide)

## 本地开发调试

需要配合 `form-preview-mobile` 项目联调，具体步骤参见 [调试组件库](https://git.fescotech.com/npm/package/form-design/form-preview-mobile#%E6%9C%AC%E5%9C%B0%E5%BC%80%E5%8F%91%E8%B0%83%E8%AF%95-form-render-ant-mobile-%E7%BB%84%E4%BB%B6%E5%BA%93)

## 打包发布

```bash
yarn build
```

发布时按照前端规范中的私服发布流程进行发布