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,
    },
}); 

完