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

标签，它是所有组件的父组件。可以添加子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