一.简介
作为创建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', }, });
效果如下
5.png
三.属性
- 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平台)
决定这个视图是否需要在被混合之前绘制到一个位图上
网友评论