order | title |
---|---|
0 |
Ant Design Mobile RN of React |
antd-mobile-rn
是 Ant Design 的移动规范的 React 实现,服务于蚂蚁及口碑无线业务。
- UI 样式高度可配置,拓展性更强,轻松适应各类产品风格
- 基于 React Native 的 iOS / Android / Web 多平台支持,组件丰富、能全面覆盖各类场景 (antd-mobile)
- 提供 "组件按需加载" / "Web 页面高清显示" / "SVG Icon" 等优化方案,一体式开发
- 使用 TypeScript 开发,提供类型定义文件,支持类型及属性智能提示,方便业务开发
- 全面兼容 react / preact
- 适合于中大型产品应用
- 适合于基于 react / preact / react-native 的多终端应用
- 适合不同 UI 风格的高度定制需求的应用
在开始之前,推荐先学习 React 和 ES2015。我们使用了
babel
,试试用 ES2015 的写法来提升编码的愉悦感。确认 Node.js 已经升级到 v4.x 或以上。
可以是已有项目,或者是使用 create-react-native-app 新创建的空项目,你也可以从 官方示例 脚手架里拷贝并修改
完整步骤请查看此处文档: antd-mobile-sample/create-react-native-app
$ npm install antd-mobile-rn --save
组件使用实例:
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Button from 'antd-mobile-rn/lib/button';
class HelloWorldApp extends Component {
render() {
return <Button>Start</Button>;
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
下面两种方式都可以只加载用到的组件,选择其中一种方式即可。
-
使用 babel-plugin-import(推荐)。
// .babelrc or babel-loader option { "plugins": [ ["import", { libraryName: "antd-mobile-rn" }] // 与 Web 平台的区别是不需要设置 style ] }
然后改变从 antd-mobile-rn 引入模块方式即可。
import { Button } from 'antd-mobile-rn';
说明:有人反映通过
react-native init
创建的项目在使用时可能会报 Unable to resolve modulereact-dom
的错误 ,此时不妨安装 babel-plugin-module-resolver 试试~ -
手动引入
import Button from 'antd-mobile-rn/lib/button';
在任何形式的参与前,请先阅读 贡献者文档。有任何建议或意见您可以 Pull Request,给我们 报告 Bug。
强烈推荐阅读 《提问的智慧》、《如何向开源社区提问题》 和 《如何有效地报告 Bug》,更好的问题更容易获得帮助。
如果您在使用的过程中碰到问题,可以通过下面几个途径寻求帮助,同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
通过 Stack Overflow 或者 Segment Fault 提问时,建议加上 antd
/antd-mobile-rn
标签。