github地址
https://github.com/ant-design/antd-mobile-samples/tree/master/create-react-native-app
文档地址：
https://rn.mobile.ant.design/docs/react/introduce-cn
集成
1. 安装antd-mobile-rn 库
npm install antd-mobile-rn --save
2.按需加载
2.1使用 babel-plugin-import(推荐)
npm install babel-plugin-import --save-dev
修改.babelrc配置如下
{
"presets": [
"react-native"
],
"plugins": [
[
"import",
{
"libraryName": "antd-mobile-rn"
}
]
]
}
引入组件
import { Button } from 'antd-mobile-rn';
说明：有人反映通过 react-native init 创建的项目在使用时可能会报 Unable to resolve module react-dom 的错误 ，个人按照此步骤没遇到该问题，官网建议安装 babel-plugin-module-resolver 试试~
2.2手动引入
import Button from 'antd-mobile-rn/lib/button';
3.简单使用
这里做个简单登录界面，其他组件使用参考文档（https://rn.mobile.ant.design/docs/react/introduce-cn）
简单登录界面截图
import React, {Component} from 'react';
import {StyleSheet, View} from "react-native";
import {Button, InputItem, List} from "antd-mobile-rn";
export default class LoginPage extends Component {
userName: string;
password:string;
static navigationOptions = {
headerTitle: '登陆',
cardStack: {
gesturesEnabled: false
},
}
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<View style={styles.containerStyle}>
<List style={{marginTop:20}}>
<InputItem placeholder={'用户名'} onChange={(value)=>{
this.userName = value;
}}>
</InputItem>
<InputItem type={'password'} placeholder={'密码'} onChange={(value)=>{
this.password = value;
}}>
</InputItem>
</List>
<Button type='primary' size={'large'} style={{margin:16}} onClick={()=>{
this.toLogin();
}}>登陆</Button>
</View>
);
}
toLogin(){
...//登录操作实现
}
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
},
});
这截取一些代表组件截图界面，可供快速预览参考
按钮（可自定义样式，字体大小不好改变）：
图片.png
复选框
复选框
Calendar 日历（显示日历以用来选择日期或日期区间）
图片.png
DatePickerView 时间选择器（直接渲染在区域中，而不是弹出窗口）
图片.png
DatePicker 日期选择(最多展示 5 个独立滚轮，每个滚轮表示一个不同的值)
图片.png
ImagePicker 图片选择器(样式单一，没有分类选择，不建议使用)
图片.png
Stepper 步进器
图片.png
Badge 徽标数
图片.png
NoticeBar 通告栏
图片.png
Modal 对话框(包括底部弹出，中间框，输入框)
图片.png
