一.简介
作为创建UI时最基础的组件，View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。不论在什么平台上，View都会直接对应一个平台的原生视图，无论它是UIView、<div>还是android.view.View。
二.示例
import React, { AppRegistry, Component, StyleSheet, PixelRatio, Text, View } from 'react-native'; class ViewDemo extends Component { render() { return ( <View style={styles.flex}> <View style={styles.container}> <View style={[styles.item,styles.center]}> <Text style={styles.font}>中国</Text> </View> <View style={[styles.item,styles.lineLeftRight]}> <View style={[styles.center,styles.flex,styles.lineCenter]}> <Text style={styles.font}>北京</Text> </View> <View style={[styles.center,styles.flex]}> <Text style={styles.font}>上海</Text> </View> </View> <View style={styles.item}> <View style={[styles.center,styles.flex,styles.lineCenter]}> <Text style={styles.font}>广州</Text> </View> <View style={[styles.center,styles.flex]}> <Text style={styles.font}>深圳</Text> </View> </View> </View> </View> ); } } const styles =StyleSheet.create({ container:{ borderRadius:5, marginLeft:5, marginRight:5, marginTop:300, backgroundColor:'#FF0067', padding:2, height:84, flexDirection:'row', }, flex:{ flex:1, }, item:{ flex: 1, height:80, }, font:{ color:'#fff', fontSize:16, fontWeight:'bold', }, center:{ justifyContent:'center', alignItems:'center' }, linerCenter:{ borderBottomWidth:1/PixelRatio.get(), borderColor:'#fff', }, lineLeftRight:{ borderLeftWidth:1/PixelRatio.get(), borderRightWidth:1/PixelRatio.get(), borderColor:'#fff', }, });
效果如下
三.属性
- accessibilityLabel string
设置当用户与此元素交互时，“读屏器”（对视力障碍人士的辅助功能）阅读的文字。默认情况下，这个文字会通过遍历所有的子元素并累加所有的文本标签来构建。 - accessible bool
当此属性为true时，表示此视图时一个启用了无障碍功能的元素。默认情况下，所有可触摸操作的元素都是无障碍功能元素。 - onAccessibilityTap function
当accessible为true时，如果用户对一个已选中的无障碍元素做了一个双击手势时，系统会调用此函数。（译注：此事件是针对残障人士，并非是一个普通的点击事件。如果要为View添加普通点击事件，请直接使用Touchable系列组件替代View，然后添加onPress函数）。 - onLayout
当组件挂载或者布局变化的时候调用，参数为：
{nativeEvent: { layout: {x, y, width, height}}}
这个事件会在布局计算完成后立即调用一次，不过收到此事件时新的布局可能还没有在屏幕上呈现，尤其是一个布局动画正在进行中的时候。 - onMagicTap
当accessible为true时，如果用户做了一个双指轻触(Magic tap)手势，系统会调用此函数。
此外还有
onMoveShouldSetResponder，onMoveShouldSetResponderCapture,onPresponderGrant,onResponderMove,
onResponderReject,onResponderRelease,
onResponderTerminate,onResponderTerminationRequest,onStartShouldSetResponder,onStartShouldSetResponderCapture,
pointerEvents enum('box-none', 'none', 'box-only', 'auto')(触摸事件是否可以进行穿透控件View);
removeClippedSubviews:该控件由于进行优化性能，尤其在一些滑动控件上面。该属性生效的要求如下:首先子视图的内容非常多，
四.style
backfaceVisibility enum('visible', 'hidden')
enum('visible', 'hidden')定义界面翻转的时候是否可见backgroundColor string
背景颜色borderColor string
边框颜色borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
borderRadius number
边框圆角大小borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
borderStyle enum('solid', 'dotted', 'dashed')
边框线的风格,这个和CSS样式一样的,enum('solid', 'dotted', 'dashed')borderWidth number
边框宽度borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number
opacity number
设置透明度overflow enum('visible', 'hidden')
设置内容超过容器显示还是隐藏testID string
用来在端到端测试中定位这个视图accessibilityComponentType (android平台)
定义是否该UI组件和原生组件一致化处理accessibilityLiveRegion enum('none','polite','assertive') (android平台)
告知无障碍服务当此视图更新时，是否要通知用户。只对Android API >= 19 的设备有效collapsable bool(android平台)
如果一个View只用于布局它的子组件，则它可能会为了优化而从原生布局树中移除。 把此属性设为false可以禁用这个优化，以确保对应视图在原生结构中存在。.importantForAccessibility enum('auto', 'yes', 'no', 'no-hide-descendants') (android平台)
设置视图响应事件等级needsOffscreenAlphaCompositing (android平台)
设置View是否需要渲染和半透明度效果处理的先后次序。renderToHardwareTextureAndroid (android)
设置是否需要GPU进行渲染accessibilityTraits (ios平台)
为读屏器提供更多属性。除非在元素里指定，默认情况下不提供任何属性。shouldRasterizeIOS boolean (ios平台)
决定这个视图是否需要在被混合之前绘制到一个位图上
