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

完

作者：偏爱墨绿色
链接：https://www.jianshu.com/p/817c90840ae1
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。