本文共 1900 字，大约阅读时间需要 6 分钟。

github地址

文档地址：

集成

1. 安装antd-mobile-rn 库

npm install antd-mobile-rn --save2.按需加载 2.1使用 (推荐)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 创建的项目在使用时可能会报 的错误 ，个人按照此步骤没遇到该问题，官网建议安装 试试~

2.2手动引入

import Button from 'antd-mobile-rn/lib/button';3.简单使用 这里做个简单登录界面，其他组件使用参考文档（）

简单登录界面截图

 

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 (            
                   
                        
     
      {                       this.userName = value;                    }}>                    
                         
     
      {                        this.password = value;                    }}>                    
                     
                    
    {                    this.toLogin();                }}>登陆            
           );    }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 來源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。