React Native组件（二）View组件解析

前言

了解了RN的组件的生命周期后，我们接着来学习RN的具体的组件。View组件是最基本的组件，也是首先要掌握的组件，这一篇我们来学习View组件。

1.概述

View组件是RN中最基本的组件，绝大部分的组件都继承了View组件的属性，所以学习其他组件前，要首先掌握View组件。
View组件是一个支持FlexBox布局、样式、一些触摸处理的容器，它可以放到其它的组件里，也可以有任意多个任意类型的子组件。View组件对应着多个平台的视图，比如Android的View以及iOS的UIView。
由于View组件的属性非常多，这里主要介绍一些常用的属性。

2.style属性

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

2.1 FlexBox

View组件的FlexBox 属性这里就不再介绍了，详细请看React Native探索（四）Flexbox布局详解这一篇文章。正是因为View组件提供了FlexBox 属性，因此，继承了View组件的其他组件也都具有FlexBox 属性。

2.2 shadow相关 (iOS)

View组件提供了四种阴影属性如下表：

样式名	参数属性	说明
shadowColor	color	设置阴影颜色
shadowOffset	{width: number,height: number}	设置阴影位移值
shadowOpacity	number	设置阴影透明度
shadowRadius	number	设置阴影模糊半径

设置View组件的阴影属性并没有什么意义，在View组件中定义这些样式是为了让继承它的组件去各自实现这些效果，比如Text组件。需要注意的是只有iOS平台能使用shadow属性。

2.3 elevation (Android)

elevation取值为number。Android平台没有shadow来设置阴影，但是，可以用elevation属性来间接的设置阴影。它使用Android原生的 elevation API来设置组件的高度，这样就会在界面上呈现出阴影的效果，此属性仅支持Android 5.0及以上版本。

import React,{Component} from 'react';
import {AppRegistry,StyleSheet,View} from 'react-native';
class ViewApp extends Component {
    render() {
        return (
             <View style={{flex: 1,justifyContent: 'center',alignItems:'center',backgroundColor:'white'}}> <View style={styles.shadow}/> </View> ); } } const styles = StyleSheet.create({ shadow: { height: 120,width: 120,backgroundColor: 'black',elevation: 20,shadowOffset: {width: 0,height: 0},shadowColor: 'black',shadowOpacity: 1,shadowRadius: 5 } }); AppRegistry.registerComponent('ViewSample',() => ViewApp);

在iOS平台运行如上代码，效果为：

在Android平台运行效果则为：

很明显，elevation的效果远远不及shadow，这时我们可以采用第三方库react-native-shadow。

2.4 border相关

borderStyle的取值为 enum(‘solid’,‘dotted’,‘dashed’)，用来设置边框的风格，三个值分别对应着实线边框、点状边框和虚线边框，默认值为solid。
除了可以设置边框的风格，还可以用定义边框的颜色和边框的圆角。边框的颜色设置有borderColor、borderTopColor 、borderRightColor 、borderBottomColor 、borderLeftColor，取值都为string，通常情况下用borderColor就足够了。
边框的圆角设置有borderRadius 、borderTopLeftRadius 、borderTopRightRadius 、borderBottomLeftRadius 、borderBottomRightRadius，取值为number。

import React,View,Text} from 'react-native';
class ViewApp extends Component {
    render() {
        return (
            <View style={styles.viewStyle}> <View style={styles.viewTextStyle}> <Text style={styles.textStyle}>border</Text> </View> </View> ); } } const styles = StyleSheet.create({ viewStyle: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'white' },viewTextStyle: { justifyContent: 'center',alignItems:'center',width: 80,height: 50,borderWidth:1,borderStyle:'dashed',borderRadius:10,borderColor:'red' },textStyle: { fontSize: 20 } }); AppRegistry.registerComponent('ViewSample',() => ViewApp);

上面的例子用到了border相关的属性。需要注意的是，如果不设置borderRadius，borderStyle的dotted和dashed的取值会无效，效果如下图所示。

2.5 transform

transform的取值为：

[{perspective: number},{rotate: string},{rotateX: string},{rotateY: string},{rotateZ: string},{scale: number},{scaleX: number},{scaleY: number},{translateX: number},{translateY: number},{skewX: string},{skewY: string}]

transform的取值总的来说，共分为四种类型：translate、scale、rotate和skew，分别用来设置View组件的平移、缩放、旋转和倾斜。
View组件用transform属性的效果不是很明显，绝大部分组件都继承了View组件的transform属性，比如Text。我们改写2.4小节中的例子，将textStyle改为如下代码：

textStyle: {
        fontSize: 20,transform: [{rotate: '40deg'},{scale: 0.9},{translateY: 10}]
    }

运行效果如下：

对于translate、scale、rotate的效果，Android开发者会非常熟悉，那么rotate和skew有什么区别呢？再来修改textStyle：

textStyle: { fontSize: 20,transform:[{skewY:'40deg'}]
    }

运行效果如下：

从两个图的效果可以看出，rotate和skew的区别就是：rotate在旋转的同时，不会改变Text组件的形态，而skew则随着倾斜角度的改变，Text组件的形态也会发生相应的变化。如果我们加大skew的倾斜角度，比如60deg，Text组件的形态则会变为下图的效果。

2.6 overflow (iOS)

overflow取值为enum(‘visible’,‘hidden’)。它用来定义当View组件的子组件的宽高超过View组件宽高时的行为，默认值为hidden，即隐藏超出的部分。overflow只在iOS平台有效，在Android平台即使设置overflow为visible，呈现的还会是hidden的效果。

2.7 backgroundColor

backgroundColor取值为string。它用来设定背景颜色，默认的颜色为非常浅的灰色，只有Text和TextInput组件继承了父组件的背景颜色，其他的组件都要设置自己的背影颜色。

2.8 opacity

opacity 的取值为0到1，当值为0时，表示组件完全透明，而值为1时，则表示组件完全不透明。

3.属性

3.1 触摸事件回调函数

触摸事件回调函数用来处理用户的触摸屏幕操作，一般情况下，触摸事件都是在其他组件中完成的。关于触摸事件是一个比较大的知识点，这里只介绍这些触摸事件回调函数的作用。

onStartShouldSetResponder：触摸事件为touchDown时，是否申请成为事件响应者，接收触摸事件。如果返回true，则表示组件需要成为事件响应者。@H_6_301@
onStartShouldSetResponderCapture：触摸事件为touchDown时，是否要拦截此事件，阻止子组件接收该事件，如果返回true，则表示要进行拦截。@H_6_301@
onMoveShouldSetResponder ：触摸事件为TouchMove时，是否申请成为事件响应者，接收触摸事件。如果返回true，则表示组件需要成为事件响应者。@H_6_301@
onMoveShouldSetResponderCapture ：触摸事件为TouchMove时，是否要拦截此事件，阻止子组件接收该事件。@H_6_301@
onResponderGrant：申请成为事件响应者成功，组件开始接收触摸事件。@H_6_301@
onResponderReject：申请成为事件响应者失败，其他组件正在进行事件处理。@H_6_301@
onResponderMove：触摸手指移动的事件（TouchMove）。@H_6_301@
onResponderTerminationRequest：在组件成为事件响应者期间，其他组件申请成为响应者，返回为true，则表示同意释放响应者角色。@H_6_301@
onResponderTerminate：如果组件释放响应者角色，会回调该函数，通知组件事件响应处理被终止了。这个回调也会发生在系统直接终止组件的事件处理，例如用户在触摸操作过程中，突然来电话的情况。@H_6_301@
onResponderRelease：表示触摸完成（touchUp）的时候的回调，表示用户完成了本次的触摸交互。@H_6_301@

3.2 pointerEvents

pointerEvents的取值为enum(‘Box-none’,‘none’,‘Box-only’,‘auto’) 。它用来控制当前视图是否可以作为触控事件的目标。
在开发中，很多组件是被布局到手机界面上的，其中一些组件会遮盖住它的位置下方的组件，有一些场景需要被遮盖住的组件来处理事件。比如一个地图组件上覆盖了一个图像组件用来显示信息，但是我们不想这个图像组件影响用户的手指拖动地图的操作，这时就可以使用图像组件从View组件继承得到的pointerEvents属性来解决这个问题。
pointerEvents的取值含义如下所示：

none：组件自身不能作为触控事件的目标，交由父组件处理。@H_6_301@
Box-none：组件自身不能作为触控事件的目标，但其子组件可以。@H_6_301@
Box-only：组件自身可以作为触控事件的目标，但其子组件不能。@H_6_301@
auto：组件可以作为触控事件的目标。@H_6_301@

3.3 removeClippedSubviews

removeClippedSubviews的取值为bool。它的一个特殊的与性能优化相关的属性，通常在ListView和ScrollView中使用，当组件有很多子组件不在屏幕显示范围时，可以将removeClippedSubviews设置为true，允许释放不在显示范围子组件，从而优化了性能。需要注意的是，要想让此属性生效，要确保overflow属性为默认的hidden。

3.4 动画相关

needsOffscreenAlphaCompositing (Android)
needsOffscreenAlphaCompositing的取值为bool，是Android平台独有的属性。它用来决定视图是否要先离屏渲染再进行半透明度处理，来确保颜色和混合效果正确。为了正确的显示透明表现而进行离屏渲染会带来极大的开销，对于非原生开发者来说很难调试，因此，它的默认值为false。

renderToHardwareTextureAndroid (Android)
renderToHardwareTextureAndroid的取值为bool，同样是是Android平台独有的属性。它用来决定视图是否要把它本身（以及所有的子视图）渲染到一个GPU上的硬件纹理中。
在Android平台上，这对于只修改透明度、旋转、位移和缩放的动画和交互是很有用的：视图不必每次都重新绘制，显示列表也不需要重新执行，纹理可以被重用于不同的参数。负面作用是这会大量消耗显存，所以当交互/动画结束后应该把此属性设置回false。

shouldRasterizeIOS (iOS)
shouldRasterizeIOS的取值为bool，是iOS平台独有的属性。它决定视图是否需要在被混合之前绘制到一个位图上。
这对于动画和交互来说是有很有用的，它不会修改这个组件的尺寸和它的子组件。举例来说，当我们移动一个静态视图的位置的时候，栅格化允许渲染器重用静态视图的缓存位图，并快速合成。
栅格化会导致离屏的绘图传递，位图会消耗内存。所以使用此属性需要进行充分的测试和评估。

还有一些View属性这里没有给出，比如RN为了方便失能人士使用手机而提供的相关属性等等，具体的属性请查看官方文档。

参考资料
官方文档
《React Native跨平台移动应用开发》第二版
React Native 中如何给 Navigator 添加一条合格的阴影
 React Native 触摸事件处理详解
 React Native中pointerEvent属性

欢迎关注我的微信公众号，第一时间获得博客更新提醒，以及更多成体系的Android相关原创技术干货。
扫一扫下方二维码或者长按识别二维码，即可关注。