# @arco-design/mobile-react 中文文档

规范地址：https://npmcn.com/package/%40arco-design/mobile-react/

版本：2\.39\.1
npm 元数据更新时间：2026-06-03T06:17:41.543Z
中文译文更新时间：2026-11-06T15:00:54.323Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40arco-design/mobile-react
原文对照：https://npmcn.com/package/%40arco-design/mobile-react/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：15 MB，3394 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：5 个
- peer 依赖：@types/react \>=16\.9\.0，@types/react-dom \>=16\.9\.0，@types/react-transition-group \>=4\.3\.0，react \>=16\.9\.0，react-dom \>=16\.9\.0，react-transition-group \>=4\.3\.0
- 首次发布：2022-07-07T12:19:58.893Z
- 最新版本发布：2026-06-03T06:17:41.263Z
- 近 30 天下载量：6263（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：77（近 12 个月 4 个）

## 中文简介

遵循下面的步骤快速开始使用组件库.

## 安装

```sh
npm install @arco-design/mobile-react
```

也可以使用：`pnpm add @arco-design/mobile-react`、`yarn add @arco-design/mobile-react`、`bun add @arco-design/mobile-react`

## README

# 快速启动

遵循下面的步骤快速开始使用组件库.

\========

## 安装

```
npm install @arco-design/mobile-react -S
```

## 项目依赖性

```js
"peerDependencies": {
    "react": ">=16.9.0",
    "react-dom": ">=16.9.0",
    "react-transition-group": ">=4.3.0"
}
```

## 自适应

样式使用 `rem` 用于自适应 (@ base-font- small: 50px). 请确保项目引入 `flexible.js` 或其他能够根据屏幕大小为html设定基本字体大小的工具功能。 您也可以导入此组件库提供的柔性. js :

```js
import setRootPixel from '@arco-design/mobile-react/tools/flexible';

setRootPixel();
```

如果 `baseFontSize` 不同,您可以更改输入的参数并更改 `@base-font-size` 变量 :

```js
// js
/**
 * @param baseFontSize Baseline fontSize of 1rem, default 50
 * @param sketchWidth Width of UI draft, default 375
 * @param maxFontSize Maximum fontSize limit, default 64
 * @return {() => void} removeRootPixel Cancel the baseFontSize setting and remove the resize listener
 */
setRootPixel(37.5);

// less options
lessOptions: {
    javascriptEnabled: true,
    modifyVars: {
        '@base-font-size': 37.5,
    }
}
```

## 以 CDN 导入

您可以通过 CDN 资源导入 `<script>` 标签。 注意您需要先导入对等依赖的 CDN 资源 .

反应和反应DOM : **[点击这里](https://reactjs.org/docs/cdn-links.html)**

反应过渡组 : **[点击这里](https://reactcommunity.org/react-transition-group/)**

```
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.39.0/dist/style.min.css">
<script src="https://unpkg.com/@arco-design/mobile-react@2.39.0/dist/index.min.js"></script>
```

## 完全导入

注意样式文件需要手动导入 .

```js
import Arco from '@arco-design/mobile-react';
import '@arco-design/mobile-react/esm/style';

```

## 部分导入( 建议)

建议使用 `babel-plugin-import` 以导入**[点击这里](https://www.npmjs.com/package/babel-plugin-import)** 以获得此插件更灵活的配置 :

```
npm install babel-plugin-import -D
```

### 按需导入组件

**.baberrc.js (英语)**数字 :

```js
plugins: [
    ["import", {
        "libraryName": "@arco-design/mobile-react",
        "libraryDirectory": "esm", // In SSR environment, you need to use `cjs` here
        "style": (path) => `${path}/style`,
    }]
]
```

### 按需导入图标

**.baberrc.js (英语)**数字 :

```js
plugins: [
    ["import", {
        "libraryName": "@arco-design/mobile-react/esm/icon", // In SSR environment, you need to replace `esm` with `cjs`
        "libraryDirectory": "",
        "camel2DashComponentName": false,
    }]
]
```

如果两者兼有 **组件** 财务报告和审定财务报表 **图标** 需要按需导入,需要在第三个参数中添加不同的名称值.

```js
plugins: [
    ["import", {
        "libraryName": "@arco-design/mobile-react",
        "libraryDirectory": "esm", // In SSR environment, you need to use `cjs` here
        "style": (path) => `${path}/style`
    }, "@arco-design/mobile-react"],
    ["import", {
        "libraryName": "@arco-design/mobile-react/esm/icon", // In SSR environment, you need to replace `esm` with `cjs`
        "libraryDirectory": "",
        "camel2DashComponentName": false
    }, "@arco-design/mobile-react/esm/icon"]
]
```

然后在导入时只需要写出一行,它会被按要求加载,而不是在包装时完全被导入:

```js
import { Button as ArcoButton } from '@arco-design/mobile-react';

import { IconAsk, IconBack } from '@arco-design/mobile-react/esm/icon';
```

## 部分导入( V)

建议使用 `vite-plugin-importer` 要导入( t)**[点击这里](https://www.npmjs.com/package/vite-plugin-importer)** 从此插件中了解更多信息 :

```
npm install vite-plugin-importer -D
```

### 按需导入组件

**vite.config.ts (英语)** 数字 :

```js
import usePluginImport from 'vite-plugin-importer'

export default defineConfig({
    plugins: [
        usePluginImport({
            libraryName: "@arco-design/mobile-react",
            libraryDirectory: "esm",
            style: (path) => `${path}/style`,
        })
    ]
})
```

### 按需导入图标

**vite.config.ts (英语)** 数字 :

```js
import usePluginImport from 'vite-plugin-importer'

export default defineConfig({
    plugins: [
        usePluginImport({
            libraryName: "@arco-design/mobile-react/esm/icon",
            libraryDirectory: "",
            camel2DashComponentName: false,
        })
    ]
})
```

如果组件和图标都需要按需导入,则只需声明全部,不需要任何更改.

**vite.config.ts (英语)** 数字 :

```js
import usePluginImport from 'vite-plugin-importer'

export default defineConfig({
    plugins: [
        usePluginImport({
            libraryName: "@arco-design/mobile-react",
            libraryDirectory: "esm",
            style: (path) => `${path}/style`,
        }),
        usePluginImport({
            libraryName: "@arco-design/mobile-react/esm/icon",
            libraryDirectory: "",
            camel2DashComponentName: false,
        })
    ]
})
```

## 部分导入( 手工)

如果不使用 Bail-plugin-import,则需要手动导入js和cs文件. 以下例子与上方的导入语句具有同等效力: 1

```js
import ArcoButton from '@arco-design/mobile-react/esm/button';
import '@arco-design/mobile-react/esm/button/style';

import IconAsk from '@arco-design/mobile-react/esm/icon/IconAsk';
```

## 主题变量定制和动态切换

此组件库使用 `less` 财务报告和审定财务报表 `css` 用于主题定制的变量。 css变量主要用于运行时的动态主题切换,并默认被禁用. 如果需要动态主题切换,您可以配置更少的选项来启用 Cs 变量:

```js
lessOptions: {
    javascriptEnabled: true,
    modifyVars: {
        '@use-css-vars': 1, // Enable css variables
    }
},
```

注意在配置和启用 Css 变量后,如果变量替换较少,则需要同时替换 cs 变量:

```js
// less options
lessOptions: {
    javascriptEnabled: true,
    modifyVars: {
        '@base-font-size': 37.5,
        '@primary-color': 'red',
    }
}

// css
:root {
    --base-font-size: 37.5;
    --primary-color: red;
}
```

## 使用 PC 上的组件

该部门只监测和处理触摸事件。 如果您需要使用 PC 侧的组件, 您可以导入 `touch2mouse.js` 由此组件库提供以兼容鼠标事件处理( 注意: 导入此文件后, 下列鼠标事件将被屏蔽: 鼠标下行、 鼠标输入、 鼠标离开、 鼠标移动、 鼠标出行、 鼠标过行和鼠标出行, 无法选择页面内容 ) :

```js
import '@arco-design/mobile-react/tools/touch2mouse';
```

## 常见问题

### @arco-design/mobile-react 是什么？

遵循下面的步骤快速开始使用组件库\.

### 如何安装 @arco-design/mobile-react？

在项目目录运行 npm install @arco-design/mobile-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.9\.0）、react-dom（\>=16\.9\.0）、react-transition-group（\>=4\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @arco-design/mobile-react 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/arco-design\_\_mobile-react 是否存在。

### @arco-design/mobile-react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @arco-design/mobile-react 可以商用吗？

@arco-design/mobile-react 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @arco-design/mobile-react 的下载量有多少？

根据 npm 官方下载统计，@arco-design/mobile-react 在 2026/10/07 – 2026/11/05 这 30 天内被下载 6,263 次，日均约 209 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @arco-design/mobile-react 还在维护吗？

最新版本 2\.39\.1 发布于 2026/06/03（5 个月前）；至今共发布 77 个版本，其中过去 12 个月发布了 4 个；首次发布于 2022/07/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。