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,
},
});
网友评论