README.zh-CN.md

Ant Design Mobile

Ant Design 移动端设计规范。

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

特性

• 基于 Ant Design 移动设计规范。
• 规则化的视觉样式配置，适应各类产品风格。
• 基于 React Native 的多平台支持。
• 使用 TypeScript 开发，提供类型定义文件。

演示

在线演示

http://mobile.ant.design/kitchen-sink/

客户端应用

安装

$ npm install antd-mobile --save

使用

Web

import 'antd-mobile/lib/button/style';
import Button from 'antd-mobile/lib/button';

ReactDOM.render(<Button>Start</Button>, mountNode);

需要在 webpack 中设置访问 .web.js 后缀的模块。

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

React-Native

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Button from 'antd-mobile/lib/button';

class HelloWorldApp extends Component {
  render() {
    return <Button>Start</Button>;
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

按需加载

推荐使用 babel-plugin-import 来降低打包体积。

// .babelrc
// react-native 中无需设置 style 属性
{
 "plugins": [["import", { "style": "css", "libraryName": "antd-mobile" }]]
}

并且可以直接用下面的语法加载模块。

// import js and css modularly, parsed by babel-plugin-import
import { Button } from 'antd-mobile';

浏览器支持

• iOS
• Android 4.0+

链接

• 首页
• 开发文档
• 底层 React 模块

欢迎贡献

有任何建议或意见您可以进行 提问。