React Native 之 View使用
前言
学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢
文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢
JSX 和 组件 的概念
React的核心机制之一就是虚拟DOM(可以在内存中创建的虚拟DOM元素)React利用虚拟DOM来减少对实际DOM的操作从而提升性能。传统的创建方式如下:
var newBox = document.createElement('div');
newBox.className = 'box';
$('main').appendChild(newBox);上面的代码在可读性方面比较不好,所以 React 开发了 JSX,利用我们熟悉的 HTML 语法来创建虚拟 DOM,创建方式如下:
<div className="box">
</div>在实际开发中,JSX在产品打包阶段已经编译成纯 JavaScript, JSX的语法不会带来任何性能影响。所以,JSX可以看成是比较高级但依然直观的语法糖
View 组件中常见的属性
React Native 组件 View,其作用等同于iOS中的 UIView,Android中的 android.view 或者网页中的
标签,它是所有组件的父组件,也可以说所有组件继承了它的所有属性这边就将它常见的属性罗列出来:
- Flexbox:弹性布局(Flexbox的介绍可以点我)
- Transforms:动画属性
- backfaceVisibility('visible', 'hidden'):定义界面翻转的时候是否可见
- backgroundColor:背景颜色
// 背景颜色
backgroundColor:'red'效果:
- borderBottomColor:底部边框颜色
// 底部边框宽度
borderBottomWidth:5,
// 底部边框颜色
borderBottomColor:'green'效果:
- borderBottomLeftRadius:底部左边边框圆角
// 底部边框左圆角
borderBottomLeftRadius:5效果:
- borderBottomRightRadius:
// 底部边框右圆角
borderBottomRightRadius:5效果:
- borderBottomWidth:底部边框宽度
// 底部边框宽度
borderBottomWidth:5效果:
- borderColor:边框颜色
// 全体边框宽度
borderWidth:5,
// 全体边框颜色
borderColor:'yellow'效果:
- borderLeftColor:左边框颜色
// 左边边框颜色
borderLeftColor:'black'效果:
- borderLeftWidth:左边边框宽度
// 左边边框宽度
borderLeftWidth:10效果:
- borderRadius:边框圆角
// 全体边框宽度
borderWidth:5,
// 全体边框颜色
borderColor:'black',
// 全体边框圆角
borderRadius:3效果:
- borderRightColor:右边边框颜色
// 右边框颜色
borderRightColor:'yellow'效果:
- borderRightWidth:右边边框宽度
// 右边框宽度
borderRightWidth:10效果:
borderStyle('solid', 'dotted', 'dashed'):边框风格
- solid
// 边框风格
borderStyle:'solid'效果:
- dotted
// 边框风格
borderStyle:'dotted'效果:
- dashed
// 边框风格
borderStyle:'dashed'效果:
borderTopColor:顶部边框颜色(参考上面)
borderTopWidth:顶部边框宽度(参考上面)
borderTopLeftRadius:顶部左边圆角(参考上面)
borderTopRightRadius:顶部右边圆角(参考上面)
borderWidth:边框宽度
// 全体边框宽度
borderWidth:5效果:
- opacity:设置透明度,取值从 0~1
// 透明度
opacity:0.5效果:
overflow('visible', 'hidden'):设置内容超出容器部分是否显示(以后的文章讲解)
elevation:高度,设置Z轴,可产生立体效果(以后文章讲解)
View 组件使用
- 简单使用
render() {
return (
<View style={styles.container}>
<View style={{width:300, height:100, backgroundColor:'red', borderWidth:1, borderColor:'black'}}> </View>
</View>
);
}上面代码是我们熟悉的 CSS 写法
效果:
在 React Native 开发中,推荐我们采用 StyleSheet 来进行组件的布局,这样从代码结构上来看会更加清晰,有利于后期的维护
我们将上面的样式通过 StyleSheet 方式来实现
- 视图部分
var test = React.createClass({
render() {
return (
<View style={styles.container}>
<View style={styles.viewStyle}> </View>
</View>
);
}
});- 样式部分
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}, viewStyle: {
// 尺寸
width:300,
height:100,
// 背景颜色
backgroundColor:'red',
// 边框宽度
borderWidth:1,
// 边框颜色
borderColor:'black'
} });
View 在开发中是经常会接触到的组件,灵活运用它可以帮助我们更好地结构化代码,甚至更方便的布局
React Native 之 View使用的更多相关文章
- React-Native(四):React Native之View学习
React Native实现以下布局效果:携html5(http://m.ctrip.com/html5/) 基于HelloWord修改项目代码: /** * Sample React Native ...
- React Native - 3 View, Text简介以及onPress & onLongPress事件
我们要生成如下的构图 直接上图,不解释. 如下图所示,定义函数,函数之间不需要逗号,在元素上添加事件,使用关键字this.{function name}
- React Native之常用组件(View)
一. JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能.传统的创建方式是: 但这样的代码可读性 ...
- React Native 系列(二) -- React入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- 使用Visual Studio Code和typescript 开发调试React Native项目
关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescrip ...
- React Native & react-native-web-player & React Native for Web
React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...
- React Native 继续学习
下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水.特此记录下. 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付. 2.导航条渐隐 ...
- React Native 系列(二)
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- React Native之React速学教程(中)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
随机推荐
- LeetCode All in One 题目讲解汇总(持续更新中...)
终于将LeetCode的免费题刷完了,真是漫长的第一遍啊,估计很多题都忘的差不多了,这次开个题目汇总贴,并附上每道题目的解题连接,方便之后查阅吧~ 477 Total Hamming Distance ...
- [计算机网络]简易http server程序
好久没输出了,知识还是要写下总结才能让思路更加清晰.最近在学习计算机网络相关的知识,来聊聊如何编写一个建议的HTTP服务器. 这个http server的实现源代码我放在了我的github上,有兴趣的 ...
- 用SSH访问内网主机的方法
如今的互联网公司通常不会直接自己直接配主机搭建服务器了,而是采用了类似阿里云的这种云主机,当应用变得越来越大了之后,就不可避免地增加主机,而出于成本考虑,不可能给每一台主机都分配公网带宽,所以实际的情 ...
- ABP框架 - 依赖注入
文档目录 本节内容: 什么是依赖注入 传统方式的问题 解决方案 构造器注入模式 属性注入模式 依赖注入框架 ABP 依赖注入基础 注册依赖 约定注入 辅助接口 自定义/直接 注册 使用IocManag ...
- GIT服务器的四种协议
本地协议 最基本的就是_本地协议(Local protocol)_,所谓的远程仓库在该协议中的表示,就是硬盘上的另一个目录.这常见于团队每一个成员都对一个共享的文件系统(例如 NFS)拥有访问权,或者 ...
- WCF学习之旅—WCF服务部署到应用程序(十)
上接 WCF学习之旅—WCF寄宿前的准备(八) WCF学习之旅—WCF服务部署到IIS7.5(九) 五.控制台应用程序宿主 (1) 在解决方案下新建控制台输出项目 ConsoleHosting.如下 ...
- 解析大型.NET ERP系统架构设计 Framework+ Application 设计模式
我对大型系统的理解,从数量上面来讲,源代码超过百万行以上,系统有超过300个以上的功能,从质量上来讲系统应该具备良好的可扩展性和可维护性,系统中的功能紧密关联.除去业务上的复杂性,如何设计这样的一个协 ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- Java 快速排序两种实现
快速排序,只要学习过编程的人肯定都听说过这个名词,但是有时候写的时候还真蒙住了,网上搜罗了下以及查阅了"introduction to algorithm",暂时找到两种实现快排的 ...
- 分布式服务协调员zookeeper - 应用场景和监控
zookeeper在分布式系统中作为协调员的角色,可应用于Leader选举.分布式锁.配置管理等服务的实现.以下我们从zookeeper提供的API.应用场景和监控三方面学习和了解zookeeper( ...