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 庫(kù)
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';

說(shuō)明：有人反映通過 react-native init 創(chuàng)建的項(xiàng)目在使用時(shí)可能會(huì)報(bào) Unable to resolve module react-dom 的錯(cuò)誤 ，個(gè)人按照此步驟沒遇到該問題，官網(wǎng)建議安裝 babel-plugin-module-resolver 試試~

2.2手動(dòng)引入
import Button from 'antd-mobile-rn/lib/button';
3.簡(jiǎn)單使用
這里做個(gè)簡(jiǎn)單登錄界面，其他組件使用參考文檔（https://rn.mobile.ant.design/docs/react/introduce-cn）

簡(jiǎn)單登錄界面截圖

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(){
...//登錄操作實(shí)現(xiàn)
}
const styles = StyleSheet.create({
    containerStyle: {
        flex: 1,
    },
}); 

這截取一些代表組件截圖界面，可供快速預(yù)覽參考

按鈕（可自定義樣式，字體大小不好改變）：

圖片.png

復(fù)選框

復(fù)選框

Calendar 日歷（顯示日歷以用來(lái)選擇日期或日期區(qū)間）

圖片.png

DatePickerView 時(shí)間選擇器（直接渲染在區(qū)域中，而不是彈出窗口）

圖片.png

DatePicker 日期選擇(最多展示 5 個(gè)獨(dú)立滾輪，每個(gè)滾輪表示一個(gè)不同的值)

圖片.png

ImagePicker 圖片選擇器(樣式單一，沒有分類選擇，不建議使用)

圖片.png

Stepper 步進(jìn)器

圖片.png

Badge 徽標(biāo)數(shù)

圖片.png

NoticeBar 通告欄

圖片.png

Modal 對(duì)話框(包括底部彈出，中間框，輸入框)

圖片.png

完