react native antd-mobile-rn组件库集成使用

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

完