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

作者: 偏爱墨绿色 | 来源:发表于2018-08-23 15:37 被阅读4次

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

    相关文章

      网友评论

      • 奔跑的小鹿:请问,那个.babelrc配置在哪里找,我的项目里好像并没有这个文件
        偏爱墨绿色:.babelrc文件在项目根目录下面

      本文标题:react native antd-mobile-rn组件库集成

      本文链接:https://www.haomeiwen.com/subject/nclpiftx.html