Ant Design Mobile of React

+Ant Design Mobile of React - 图1

  • UI 样式高度可配置，拓展性更强，轻松适应各类产品风格

  • 基于 React Native 的 iOS / Android / Web 多平台支持，组件丰富、能全面覆盖各类场景 (antd-mobile-rn)

  • 提供 "组件按需加载" / "Web 页面高清显示" / "SVG Icon" 等优化方案，一体式开发

  • 使用 TypeScript 开发，提供类型定义文件，支持类型及属性智能提示，方便业务开发

  • 全面兼容 react / preact

适用场景

  • 适合于基于 react / preact / react-native 的多终端应用

  • 适合不同 UI 风格的高度定制需求的应用

快速上手

可以是已有项目，或者是使用 dva / create-react-app 新创建的空项目，你也可以从 脚手架里拷贝并修改 入口页面 (html 或 模板) 相关设置： 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <!-- set `maximum-scale` for some compatibility issues -->
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  6.   <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  7.   <script>
  9.       document.addEventListener('DOMContentLoaded', function() {
  10.         FastClick.attach(document.body);
  11.       }, false);
  12.     }
  13.     if(!window.Promise) {
  14.       document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
  15.     }
  16.   </script>
  17. </head>
组件使用实例： 引入样式： 
  1. import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
按需加载

注意：强烈推荐使用。

下面两种方式都可以只加载用到的组件，选择其中一种方式即可。

然后只需从 antd-mobile 引入模块即可，无需单独引入样式。

  1. // babel-plugin-import 会帮助你加载 JS 和 CSS
  2. import { DatePicker } from 'antd-mobile';
  • 手动引入
更多增强 (非必须):

  • 稳定版：

  • 开发版：npm package

体积

  • 按需加载：只需引入业务中需要的组件即可，未 import 进来的组件不会打包进来。

  • ./dist/antd-mobile.min.js的文件

浏览器支持

  • Android 4.0+

谁在使用

如何贡献

在任何形式的参与前，请先阅读 贡献者文档。有任何建议或意见您可以 ，给我们 报告 Bug。 如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。 通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 antd/antd-mobile 标签。