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,已经网页中的

标签,它是所有组件的父组件。可以添加子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的更多相关文章

  1. React Native学习-measure测量view的宽高值

    measure()测量是根据view标签中的ref属性,使用方法如下: measureWatermarkerImage(){ this.refs.watermarkerImage.measure((a ...

  2. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  3. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

  4. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  5. React Native 学习资料

    React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/

  6. React Native 学习(三)之 FlexBox 布局

    React Native 学习(三)之 FlexBox 布局

  7. React Native学习(二)—— 开始一个项目

    本文基于React Native 0.52 一.创建一个项目 1.初始化一个RN项目 react-native init RNDemo 2.连接一个设备或是打开模拟器 可以通过 adb devices ...

  8. iOS、swift、React Native学习常用的社区、论坛

    <!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina. ...

  9. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

随机推荐

  1. [转] Makefile 基础 (5) —— Makefile 使用变量

    该篇文章为转载,是对原作者系列文章的总汇加上标注. 支持原创,请移步陈浩大神博客:(最原始版本) http://blog.csdn.net/haoel/article/details/2886 我转自 ...

  2. es6模板语法使用上的一点问题

    var str = "test"; console.log(str); // test console.log(`str`) //str 这里的str是模板语法里面的,而不是变量s ...

  3. IP,子网掩码,网关,DNS的关系解析

    IP地址: 是给每个连接在Internet上的主机分配的一个32bit地址. 地址有两部分组成,一部分为网络地址,另一部分为主机地址. IP地址分为A.B.C.D.E 5类.常用的是B和C两类. 网络 ...

  4. 标准C程序设计七---74

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  5. java并发之hashmap源码

    在上篇博客中分析了hashmap的用法,详情查看java并发之hashmap 本篇博客重点分析下hashmap的源码(基于JDK1.8) 一.成员变量 HashMap有以下主要的成员变量 /** * ...

  6. QBXT T15214 Day2上午遭遇

    题目描述 你是能看到第一题的 friends呢. -- hja ?座楼房,立于城中 . 第?座楼,高度 ℎ?. 你需要一开始选择座楼,跳. 在第 ?座楼准备跳需要 ??的花费. 每次可以跳到任何一个还 ...

  7. 某考试 T3 sine

    推完一波式子之后发现是个矩阵23333. 其实只要发现是矩阵之后就是个水题了. #include<bits/stdc++.h> #define ll long long using nam ...

  8. 搭建高可用服务注册中心-Spring Cloud学习第一天(非原创)

    文章大纲 一.Spring Cloud基础知识介绍二.创建单一的服务注册中心三.创建一个服务提供者四.搭建高可用服务注册中心五.项目源码与参考资料下载六.参考文章   一.Spring Cloud基础 ...

  9. fastscript增加公共函数

    fastscript增加公共函数 unit fs_BsCommFuncs; interface{$i fs.inc}uses SysUtils, Classes, fs_iclassesrtti, f ...

  10. 老毛桃winpe优盘启动系统个性修改全攻略.(全)

    博主从05年开始接触计算机,不能说是高手也算个老菜了,当时装系统还是用蕃茄花园的光盘安装系统,后来在学校管理机房,哪台电脑坏了就硬盘对拷. 时到今日,重启系统的方法五花八门,其中使用最广的莫过于PE优 ...