React Native学习(二)之View
React Native组件解析(二)之View
0.JSX
React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能.
JSX的语法如下
return (
<View style={styles3.container}>
<Text> 当前屏幕的宽度:{Dimensions.get('window').width} </Text>
</View>
);
在实际开发中,JSX在产品打包阶段都已经编译成纯JavaScript,JSX的语法不会带来任何性能影响。因此,JSX本身并不是什么高深的技术,可以说只是一个比较高级但很直观的语法糖。
1.概述
View组件是RN中最基本的组件,绝大部分的组件都继承了View组件的属性,所以学习其他组件前,要首先掌握View组件。View组件是一个支持Flexbox布局、样式、一些触摸处理的容器,它可以放到其它的组件里,也可以有任意多个任意类型的子组件。View组件对应着多个平台的视图,比如Android的View以及iOS的UIView。由于View组件
2.View的常见属性
View组件等同于iOS中的UIView,Android中的View,已经网页中的
Flexbox 弹性布局
Transforms 动画属性
backfaceVisibility enum('visible', 'hidden') 定义界面翻转的时候是否可见
backgroundColor color
borderBottomColor color
borderBottomLeftRadius number
borderBottomRightRadius number
borderBottomWidth number
borderColor color
borderLeftColor color
borderLeftWidth number
borderRadius number
borderRightColor color
borderRightWidth number
borderStyle enum('solid', 'dotted', 'dashed')
borderTopColor color
borderTopLeftRadius number
borderTopRightRadius number
borderTopWidth number
borderWidth number
opacity number 设置透明度,取值从0-1;
overflow enum('visible', 'hidden') 设置内容超出容器部分是显示还是隐藏;
elevation number 高度 设置Z轴,可产生立体效果。
下面对一些常见的属性进行详细解读
3. 解读
style属性作为组件属性中的一种,它包含了多种属性,这里对它们意义进行讲解。
3.1 Flexbox
View的Flexbox属性我会通过一篇详细的文章进行介绍。View组件有Flexbox属性,继承了View组件的其他组件也都具有Flexbox属性。
3.2 shadow相关
View提供了四种阴影属性如下表:
样式名字 | 值 | 说明 |
---|---|---|
shadowColor | color | 设置阴影颜色 |
shadowOffset | {width: number, height: number} | 设置阴影位移值 |
shadowOpacity | number | 设置阴影透明度 |
shadowRadius | number | 设置阴影模糊半径 |
3.3 overflow (iOS)
overflow取值为 enum('visible', 'hidden')
。它用来定义当View组件的子组件的宽高超过View组件宽高时的行为,默认值为hidden,即隐藏超出的部分。overflow只在iOS平台有效
3.3 opacity
opacity 的取值为0到1,当值为0时,表示组件完全透明,而值为1时,则表示组件完全不透明。
3.4 pointerEvents
pointerEvents的取值为enum('box-none', 'none', 'box-only', 'auto') 。它用来控制事件的传递链。pointerEvents的取值含义如下所示:
- none:组件自身不能作为触控事件的目标,交由父组件处理。
- box-none:组件自身不能作为触控事件的目标,但其子组件可以。
- box-only:组件自身可以作为触控事件的目标,但其子组件不能。
- auto:组件可以作为触控事件的目标。
3.5 removeClippedSubviews
removeClippedSubviews的取值为bool。它的一个特殊的与性能优化相关的属性,通常在ListView和ScrollView中使用,当组件有很多子组件不在屏幕显示范围时,可以将removeClippedSubviews设置为true,允许释放不在显示范围子组件,从而优化了性能。需要注意的是,要想让此属性生效,要确保overflow属性为默认的hidden。
参考:View
React Native学习(二)之View的更多相关文章
- React Native学习-measure测量view的宽高值
measure()测量是根据view标签中的ref属性,使用方法如下: measureWatermarkerImage(){ this.refs.watermarkerImage.measure((a ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React Native 学习-01
React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...
- react native 学习一(环境搭配和常见错误的解决)
react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...
- React Native 学习资料
React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/
- React Native 学习(三)之 FlexBox 布局
React Native 学习(三)之 FlexBox 布局
- React Native学习(二)—— 开始一个项目
本文基于React Native 0.52 一.创建一个项目 1.初始化一个RN项目 react-native init RNDemo 2.连接一个设备或是打开模拟器 可以通过 adb devices ...
- iOS、swift、React Native学习常用的社区、论坛
<!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina. ...
- React Native 系列(二) -- React入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
随机推荐
- SharePoint 2013 Custom MasterPage
<%@Master language="C#"%> <%@ Register Tagprefix="SharePoint" Namespace ...
- 页面之间传值的方法asp
原文发布时间为:2008-06-02 -- 来源于本人的百度文章 [由搬家工具导入] asp.net页面间传值 今天学习中要在两个页面中传值,网上搜了一下,asp.net主要用到三个方法,前两个req ...
- 如果dom节点是动态添加进页面的,在页面节点绑定事件如何解决的问题。
如果dom节点是动态添加进页面,想在节点绑定事件,传统的做法就是遍历节点,但会出现问题,也肯能有其他的办法,突然想到 可以依据事件冒泡,这样就不惧页面后添加节点而不响应事件的问题.比较结实.示例代码如 ...
- ubuntu 为firefox 安装flash_player
1.下载安装包install_flash_player_11_linux.i386.tar.gz: 2.解压文件:$ tar -xvf install_flash_player_11_linux.i3 ...
- 50深入理解C指针之---指针与别名
一.size_t:用于安全表示长度,所有平台和系统都会解析成自己对应的长度 1.定义:size_t类型表示C中任何对象所能表示的最大长度,是个无符号整数:常常定义在stdio.h或stdlib.h中 ...
- 47深入理解C指针之---指针与硬件
一.size_t:用于安全表示长度,所有平台和系统都会解析成自己对应的长度 1.定义:size_t类型表示C中任何对象所能表示的最大长度,是个无符号整数:常常定义在stdio.h或stdlib.h中 ...
- BQ25890 charging ic evb 使用注意事項
Origin : 今天做了一個小實驗, 從 bq25890 spec 可以知道, enable bq25896 充電的功能,有二個條件, 1.CHG_CONFIG bit 需為1. 2.ce pin ...
- LeetCode OJ--Median of Two Sorted Arrays ***
http://oj.leetcode.com/problems/median-of-two-sorted-arrays/ 找两个有序数组的中位数,因为有序数组,并且复杂度要求O(lg(m+n))所以想 ...
- Android gradle 相关配置
有时候我们需要重命名输出apk文件名,在Android studio 3.0以前我们是这样写的: applicationVariants.all { variant -> variant.out ...
- tensorflow提示出错'module' object has no attribute 'pack'
编译旧的代码,会像下面这样提示出错: deconv_shape3 = tf.pack([shape[0], shape[1], shape[2], NUM_OF_CLASSESS]) Attribut ...