@arco-design/mobile-react

快速上手

跟随以下的步骤，快速上手组件库的使用。

========

安装方式

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

项目依赖

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

自适应适配

样式采用 rem 进行自适应适配（@base-font-size: 50px），请确保项目已引入 flexible.js 等可根据屏幕大小为 html 设置基础字号的工具函数，也可以引入本 sdk 中提供的 flexible.js：

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

setRootPixel();

如果baseFontSize不一样，可更改传入参数，并更改@base-font-size变量：

// js
/**
 * @param baseFontSize 1rem基准fontSize，默认 50
 * @param sketchWidth UI稿宽度，默认 375
 * @param maxFontSize 最大fontSize限制， 默认 64
 * @return {Function} removeRootPixel 取消baseFontSize设置并移除resize监听，类型为 () => void
 */
setRootPixel(37.5);

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

CDN 引入

可通过 <script> 标签引入 CDN 形式资源，注意需先引入 peerDependencies 的 CDN 资源。

React & ReactDOM： 戳这里获取

React Transition Group： 戳这里获取

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

引入全部

注意样式文件需自行引入。

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

部分引入（推荐）

推荐使用 babel-plugin-import 引入（该插件更多灵活配置 戳这里 ）：

npm install babel-plugin-import -D

组件按需引入

.babelrc.js 中配置：

plugins: [
    ["import", {
        "libraryName": "@arco-design/mobile-react",
        "libraryDirectory": "esm", // 注意如果是 SSR 环境，这里需使用 `cjs`
        "style": (path) => `${path}/style`,
    }]
]

Icon 按需引入

.babelrc.js 中配置：

plugins: [
    ["import", {
        "libraryName": "@arco-design/mobile-react/esm/icon", // 注意如果是 SSR 环境，这里需将 `esm` 替换为 `cjs`
        "libraryDirectory": "",
        "camel2DashComponentName": false,
    }]
]

如果同时存在 组件 和 Icon 的按需引入方式，需要在第三个参数加上不同 name 值

plugins: [
    ["import", {
        "libraryName": "@arco-design/mobile-react",
        "libraryDirectory": "esm", // 注意如果是 SSR 环境，这里需使用 `cjs`
        "style": (path) => `${path}/style`
    }, "@arco-design/mobile-react"],
    ["import", {
        "libraryName": "@arco-design/mobile-react/esm/icon", // 注意如果是 SSR 环境，这里需将 `esm` 替换为 `cjs`
        "libraryDirectory": "",
        "camel2DashComponentName": false
    }, "@arco-design/mobile-react/esm/icon"]
]

则引入时只需写入一行即可，babel-plugin-import在打包时会按需加载而不是整体引入：

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

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

部分引入（Vite）

如果是 Vite 构建工具的话，则推荐使用 vite-plugin-importer 引入（该插件具体使用 戳这里 ）：

npm install vite-plugin-importer -D

组件按需引入

vite.config.ts 中配置：

import usePluginImport from 'vite-plugin-importer'

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

Icon 按需引入

vite.config.ts 中配置：

import usePluginImport from 'vite-plugin-importer'

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

如果同时存在 组件 和 Icon 的按需引入方式，不需要做改动，可以同时声明

vite.config.ts 中配置：

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,
        })
    ]
})

部分引入（手动）

如果不使用babel-plugin-import，则需要手动引入js和css文件。下方例子效果等同于上方引入语句：

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变量主要作用于运行时的动态主题切换，默认关闭，如有动态切换主题需求，可配置less options开启css变量：

lessOptions: {
    javascriptEnabled: true,
    modifyVars: {
        '@use-css-vars': 1, // 开启css变量
    }
},

注意在配置开启css变量后，如有变量替换需同时替换css变量：

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

// css
:root {
    --primary-color: red;
}

在 PC 端使用组件

组件中仅监听及处理 touch 相关事件，如需在 PC 端使用组件，可引入本组件库提供的 touch2mouse.js 以兼容 mouse 事件处理（注意：引入该文件后将阻止如下鼠标事件：mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover和mouseup，页面内容无法被选中）：

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