react-native安装Ant Design
1.集成Ant Design到项目
项目根目录中执行命令：
npm install @ant-design/react-native --save
2.集成按需加载babel-plugin-import到项目
项目根目录中执行命令：
npm install --save-dev babel-plugin-import
3.创建.babelrc文件
根目录中创建新文件，命名为.babelrc，编辑内容为：
{"presets": ["module:metro-react-native-babel-preset"],"plugins": [["import",{"libraryName": "@ant-design/react-native"}]]
}
如图：
4.使用Ant控件
例如使用Ant中的Button：
import React from 'react';
import {Carousel,Button} from '@ant-design/react-native';const recommendArticle = () => {const articleItem = ({ item }) => (<TouchableOpacity style={styles.item}><Text style={styles.itemTitle}>{item.title}</Text><View style={styles.itemBottonView}><Text style={styles.itemBottonText}>{item.count}</Text><Text style={styles.itemBottonText}>{item.progress > 0 ? '已学' + item.progress*100 + '%' : '未学习' }</Text></View></TouchableOpacity>)return (<SafeAreaView><Button type='primary' size={'large'} style={{margin:16}}>登陆</Button></SafeAreaView>)
}
运行效果：
react-native安装Ant Design相关推荐
- 2020年React Native使用Ant Design Mobile RN组件
Ant Design Mobile RN是一个很优秀的React Native 界面库,可以帮助我们简单方便的开发出漂亮的界面.我在基于0.63版本使用的过程中遇到一些小波折,比如字体无法正常,各种红 ...
- React如何使用 Ant Design(简单使用)
在这里介绍一下,这个Ant Design组件库 是与我们的 element 组件是一样的,使用方法大致相似. antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发 ...
- react native 安装watchman flow
安装watchman-自动监听文件内容变化,刷新数据 brew install watchman 1 如果提示没有安装brew /usr/bin/ruby -e "$(curl -fsSL ...
- react native 安装插件
RN插件 1.字体库icons npm i react-native-vector-icons --save (要关联 rnpm link) 2.字符串string npm i query-strin ...
- React开发（259）:react项目理解 ant design debug
react dva中利用select方法取出state中的数据 yield select(state=> state.xxx)
- nodejs项目安装ant design
1.确保安装好nodejs $ node --version v10.4.1 2.确保npm $ npm -v 6.1.0 3.安装 $ sudo npm install antd-init -g / ...
- 【React】【Ant Design】引入阿里矢量图
一.将选好的图标加入购物车 二.点击购物车 三.添加至项目 四.添加至选择的项目 五.找到"我的项目"下的symbol 可以看到这里有你刚刚添加的图标 六.点击"复制代码 ...
- React开发（261）:react项目理解 ant design 控制多选
- React开发（258）:react项目理解 ant design debug
最新文章
- Git 常用命令清单
- 一个div 上下两行_用 Python 撸一个 Web 服务器第4章：动态渲染数据
- 2017GAITC丨尖峰对话：AI的第三次寒冬会不会到来？
- gitlab+svn自动增量发包
- ssl提高组周三备考赛【2018.10.31】
- oracle sysaux表空间不足,sysaux 表空间不足问题处理
- qt ui界面无法移动控件_都是知识点！移动端UI设计最基本的10种APP界面类型（上）...
- python是如何引起的_1.2.8 如何开始使用python
- python平方和psum_P19 python sum()函数和.sum(axis=0)函数的使用
- Java学习代码合集
- PADS2007无模命令与快捷键
- Windows软件打包方法
- 怒刷3000条短视频后，我终于发现网红300万点赞的套路
- 车机屏幕适配方案总结
- linux sar 分析,Linux性能测试分析命令_sar
- 疫情之下，企业如何突围？
- Mac升级node版本
- 24点小游戏（C语言实现）
- 华为交换IP POOL地址池使用情况查询
- Python计算机二级大题