ReactNative开发——View组件

ReactNative开发——View组件

View组件是React Native最基本的组件，绝大部分其他React Native组件都继承了View组件的属性，包括支持View组件的样式设置，回调函数以及其他属性。

View组件的颜色和边框

键 值 backgroudColor 用来指定组件的背景颜色，如果没指定，默认的背景颜色会是一种非常浅的灰色，只有Text,与TextInput会继承其父组件的背景颜色，这意味着其他组件都要设置自己的背景颜色 Opacity 定义了组件的透明度，它的取值为0——1，当取值为0时，表示组件完全透明；而值为1时，表示组件完全不透明 borderStyle 用来设置组件边框的风格，它的取值只能是 solid，dotted,dashed三值之一，分别表示实线边框，点状线边框和虚线边框。这个默认值为solid。 borderColor 用来表示边框的颜色 borderTopColor 顶部边框颜色 borderRightColor 有边框颜色 borderBottomColor 下边框颜色 borderLeftColor 左边框颜色 borderRadius 用来表示圆角角度 borderTopLeftRadius 左上圆角角度 borderTopRightRadius 右上圆角角度 borderBottomLeftRadius 左下圆角角度 borderBottomRIghtRadius 右下圆角角度

View组件的阴影与其他视角效果

键 值 shadowColor 阴影的颜色 shadowOffset 阴影的位移值 shadowOpacity 阴影的透明度 shadowStyle 用来设置边框的风格，它的取值只能是solid,dotted,dashed三个值之一，分别表示实现边框，点状边框和虚线边框，这个键的默认值为solid。 overflow overflow键有两个字符串类型的取值，visible和hidden，它定义了当View组件中的子组件宽高超出View组件宽高时的行为，默认为hidden，即隐藏超出的部分，这个只对ios有效

View组件的变形

在React Naive开发中，开发者可以利用transform样式键设置实现组件的变形，从而实现文字或图像的变形。变形包括：translate(平移)，scale(缩放)、rotate(旋转),skew（倾斜）四种类型。
transform样式键的格式是：

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

View组件的回调函数

onMoveShouldSetResponder、onMoveShouldSetResponderCapture、onResponderGrant、onResponderMove、onResponderReject、onResponderRelease、onResponderTerminate、onResponderTerminationRequest、onStartShouldSetResponder、onStartShouldSetResponderCapture这10个属性是回调函数类型的属性，他们被用来处理手势（手指在屏幕上触摸、移动）事件，但对于部分处理手势事件的需求，开发者都是使用其他组件的能力完成的。

onLayout是View组件回调函数类型的属性。当View组件被加载或者布局改变时，回调函数将被调用。

View组件的其他属性

removeClippedSubviews是布尔类型的属性。他是一个特殊的与性能优化相关的属性，通常在ScrollView组件或ListView组件中使用。当组件中很多子组件不在屏幕显示范围内时。将这些属性设置为true,允许这些不在显示范围内的子组件以优化性能。

React Native有一套专门为了上失能人士（指因为伤病而导致视力或者触摸能力受损的人）更方便的使用手机而准备的，其中大部分属性是在View组件中设置。
IOS和Andorid平台都可以使用的属性有：accessible,accessibilityLabel。
IOS平台独有的属性有：accessibilityTraits,onAccessibilityTab,onMagicTap,
Andorid平台独有的属性有：accessibilityCompentType,accessibilityLiveRegion,importantForAccessbility

PointerEvents属性

在React Native UI开发中，很多组件被布局在手机屏幕上，其中一些组件使用绝对定位布局，在代码运行时的某个时刻有可能会遮盖住它的位置下方的某个组件的部分或者全部。在React Native中，触摸事件总是被传送到最上层的组件，绝对定位可以被认为会覆盖在它前面的布局的上方。对于某些应用逻辑，被遮盖的组件需要处理触摸事件，这时就需要我们设置View的pointerEvent属性来解决这个问题。

PointerEvents的取值 含义 none 当取值为none时，发生在本组件与本组件的子组件上的触摸事件都会交给本组件的父组件处理。 box-none 当取值为box-none，发生在本组件显示范围内（但非本组件的子组件显示范围内）的事件将交由本组件的父组件处理，发生在本组件的子组件范围内的触摸事件将交由子组件处理。 box-only 发生在本组件显示范围内的触摸事件将全部由本组件处理（即使触摸事件发生在本组件的子组件显示范围内） auto 行为视组件的不同而不同，并不是所有的子组件都支持box-none和box-only，开发者需自行测试

参考：http://reactnative.cn/docs/0.44/view.html#content