react-native 使用 antd-mobile-rn UI进行开发app
1、创建 react-native 项目
react-native init app03
2、安装组件
npm install antd-mobile-rn --save
3、配置按需加载
npm install babel-plugin-import --save-dev // .babelrc 文件中增加下面代码
"plugins": [
[
"import",
{
"libraryName": "antd-mobile-rn"
}
]
]
4、使用 antd-mobile-rn 组件进行开发
App.js
import React, {Component} from 'react';
// 导入组件
import { Button } from 'antd-mobile-rn';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
// 使用组件
<Button type='primary'>按钮</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
展示效果:

react-native 使用 antd-mobile-rn UI进行开发app的更多相关文章
- 关于React Native项目在android上UI性能调试实践
我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到.要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是统一处理的,这意味着你没办法像iOS那样 ...
- 【React Native】在原生和React Native间通信(RN调用原生)
一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导 ...
- React全家桶+AntD 共享单车后台管理系统开发
第1章 课程导学对课程整体进行介绍,并且说明学习的必要性.第2章 React基础知识React基础知识以及生命周期的介绍,并使用React官方脚手架初始化基础项目,同时介绍了新一代打包工具Yarn.第 ...
- react native for Android (make you first android app)
第一步:如果你的电脑安装了node,恭喜你,第一步完成:如果没有,那请先安装node. 第二步:安装react-native-cli,在windows下需要从github签下来的react-nativ ...
- React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发
React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发 2016/09/23 | React Native技术文章 | Sky丶清| 4 条评论 | 1 ...
- windows安装React Native开发运行环境
React Native是什么 React Native是facebook开源的一个用于开发app的框架.React Native的设计理念:既拥有Native (原生) 的用户体验.又保留React ...
- 【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)
),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Im ...
- [RN] 01 - Init: Try a little bit of React Native
Ref: React Native跨平台移动应用开发 后记:这本书博客味有点浓. 本篇涉及新建工程的若干套路,以及一点语法知识. 创建新工程 (1) 解决的一大核心问题: (2) 使用Javascri ...
- 携程React Native实践
React Native(下文简称 RN)开源已经一年多时间,国内各大互联网公司都在使用,携程也在今年 5 月份投入资源开始引入,并推广给多个业务团队使用,本文将会分享我们遇到的一些问题以及我们的优化 ...
随机推荐
- 我的MAC可能在设置环境变量的时候设置错了,现在整个MAC的vi,ls等命令都执行不了了。
1,在命令行中输入export PATH=/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11R6/bin这样可以保证命令行命令暂时可以使用.命令执行完之后先不要关闭终端或者c ...
- Android学习(十一) File文件操作
File类 1.获取当前应用程序的目录: this.getFilesDir(); //获取当前应用程序的数据目录 ...
- 【IOS】mac终端运行.sh文件总是提示permission denied
如果我目录jni有一个list.sh文件 我直接 nxgametekiMacBook-Air:jni luonan$ ./list.sh ../../Classes 提示 permission de ...
- 【Excle数据透视表】如何重复显示行字段的项目标签
前提:该数据透视表以表格形式显示 解决办法: 通过报表布局设置"重复所有项目标签" 修改前样式 步骤 单击数据透视表中任意单元格→设计→报表布局→重复所有项目标签 修改后样式
- ROS当中添加第三方库
下文以serial 库为依据讲解第三方库在ROS下面的配置. 参考文献:http://blog.csdn.net/u011853479/article/details/51263590 ros中使 ...
- 基于Android的rgb七彩环颜色采集器
代码地址如下:http://www.demodashi.com/demo/11892.html 一.前言. 在大学期间,看到这个rgb灯,蛮好奇的,这么漂亮的颜色采集,并且可以同步到设备rbg灯颜色, ...
- Jmeter3.0-插件管理
本文转自推酷:http://www.tuicool.com/articles/UV7fI3V JMeter ,老牌,开源,轻量,Apache基金会的顶级项目,光是这些关键字就足以让大量用户将其纳入自己 ...
- 介绍C#结构体与类区别
1. 结构体与类定义方式 结构体定义使用struct类定义使用class 结构体: struct testDemo{ int num; void action(){ } } 类: class test ...
- CNN 防止过拟合的方法
CNN 防止过拟合的方法 因为数据量的限制以及训练参数的增多,几乎所有大型卷积神经网络都面临着过拟合的问题,目前常用的防止过拟合的方法有下面几种: 1. data augmentation: ...
- C语言小板凳(1)
①strlen()函数作用:计算字符串的长度,当遇到"\n"字符时结束,即遇到数值"0"时结束计算,有一点特别要注意当这个函数用来计算数组的长度的时候遇到数值0 ...