React Native学习(二)之View

时间 2019-12-10

标签 react native 学习 view 栏目 React 繁體版

原文原文链接

React Native组件解析(二)之View

0.JSX

React的核心机制之一就是虚拟DOM：能够在内存中建立的虚拟DOM元素。React利用虚拟DOM来减小对实际DOM的操做从而提高性能.html

JSX的语法以下react

return (
    <View style={styles3.container}>
      <Text> 当前屏幕的宽度：{Dimensions.get('window').width} </Text>
    </View>
);

在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响。所以，JSX自己并非什么高深的技术，能够说只是一个比较高级但很直观的语法糖。ios

1.概述

View组件是RN中最基本的组件，绝大部分的组件都继承了View组件的属性，因此学习其余组件前，要首先掌握View组件。View组件是一个支持Flexbox布局、样式、一些触摸处理的容器，它能够放到其它的组件里，也能够有任意多个任意类型的子组件。View组件对应着多个平台的视图，好比Android的View以及iOS的UIView。因为View组件git

2.View的常见属性

View组件等同于iOS中的UIView，Android中的View，已经网页中的github

标签，它是全部组件的父组件。能够添加子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轴，可产生立体效果。

下面对一些常见的属性进行详细解读react-native

3. 解读

style属性做为组件属性中的一种，它包含了多种属性，这里对它们意义进行讲解。性能优化

3.1 Flexbox

View的Flexbox属性我会经过一篇详细的文章进行介绍。View组件有Flexbox属性，继承了View组件的其余组件也都具备Flexbox属性。布局

3.2 shadow相关

View提供了四种阴影属性以下表：post

样式名字	值	说明
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