Ant Design Mobile of React

Ant Design Mobile of React

antd-mobile 是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。

特性和优势

UI 样式高度可配置，拓展性更强，轻松适应各类产品风格
基于 React Native 的 iOS / Android / Web 多平台支持，组件丰富、能全面覆盖各类场景
内置 "组件按需加载" / "Web 页面高清显示" / "SVG Icon" 等优化方案，一体式开发
使用 TypeScript 开发，提供类型定义文件，支持类型及属性智能提示，方便业务开发

适用场景

适合于中大型产品应用
适合于基于 react / react-native 的多终端应用
适合不同 UI 风格的高度定制需求的应用

快速上手

在开始之前，推荐先学习 React 和 ES2015。我们使用了 babel，试试用 ES2015 的写法来提升编码的愉悦感。
确认 Node.js 已经升级到 v4.x 或以上。

1. 创建一个项目

可以是已有项目、或者是新创建的空项目，但更推荐从官方示例脚手架里拷贝并修改

参考更多官方示例集
或者你可以利用 React 生态圈中的各种脚手架

2. 安装

$ npm install antd-mobile --save
$ npm install babel-plugin-import --save-dev

3. 使用

遇到报错，请先参考示例脚手架及官方示例集
antd-mobile@1.x 的 web 版的组件文件名以 .web.tsx 结尾，react-native 版本的以 .tsx 结尾，很少一部分的跨平台组件文件名以 .tsx 结尾。 (.tsx文件会被 typescript 编译为.js文件)

Web 使用方式

以下文档都基于 webpack@1.x 版本，如果你使用 webpack@2.x 请查看 #516

安装 webpack 相关 loader 依赖 (必选)

npm i style-loader css-loader less less-loader svg-sprite-loader@0.3.1 --save-dev

antd-mobile@1.x 必须使用 svg-sprite-loader@^0.3.1 , 请看相关信息

设置 webpack 的 resolve 来自动区分 web & native 组件加载。（必选）

resolve: {
  modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],
  extensions: ['', '.web.js', '.js', '.json'],
},

使用 babel-plugin-import 支持按需加载：（必选）

// .babelrc
{"plugins": [["import", { "style": "css", "libraryName": "antd-mobile" }]]}
// or webpack config file
webpackConfig.babel.plugins.push(['import', { libraryName: 'antd-mobile', style: 'css' }]);

如果你想了解为什么需要配置 babel-plugin-import ,请看按需加载

Antd-Mobile 所有图标都是用 svg，需要配置 svg-sprite-loader, 配置方案见 Icon 文档（必选）
入口页面（ html 或模板）必需高清方案 & polyfill 相关设置：（必选）
- 引入『高清方案』设置：具体方法见 wiki 里 HD wiki
- 引入 FastClick (关联 #576)
- 引入 Promise 的 fallback 支持 (部分安卓手机不支持 Promise)，示例代码如：

if(!window.Promise) {
  document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}

组件使用实例：

// Auto import js and css modularly, parsed by babel-plugin-import
import { Button } from 'antd-mobile';
ReactDOM.render(<Button>Start</Button>, mountNode);

服务端渲染问题：请参考此处
如何自定义主题？见此文档，基于 antd-mobile 的自定义 UI 库：web-custom-ui / web-custom-ui-pro

React-Native 使用方式

注：Table/Menu/NavBar 组件暂无 React Native 版本；

.babelrc 文件添加以下配置

{"plugins": [["import", { "libraryName": "antd-mobile" }]]}

组件使用实例：

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Button } from 'antd-mobile';
class HelloWorldApp extends Component {
  render() {
    return <Button>Start</Button>;
  }
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);