一.View的作用:
作为创建UI时最基础的组件,View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图。不论在什么平台上,View都会直接对应一个平台的原生视图,无论它是UIView、还是android.view.View。
二。View与样式的关联
View与样式的关联分为内联式和外联式。View的设计初衷是和StyleSheet搭配使用,这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用。
三。属性
3.1基本属性
Flexbox... 弹性布局
backfaceVisibilityenum('visible', 'hidden')
backgroundColor 背景颜色
borderColor 边框颜色
borderTopColor
borderRightColor
borderBottomColor
borderLeftColor
borderRadius
borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius
borderStyleenum('solid', 'dotted', 'dashed')
borderWidth
borderTopWidth
borderRightWidth
borderBottomWidth
borderLeftWidth
opacitynumber
overflowenum('visible', 'hidden')
androidelevationnumber
3.2交互属性
accessible 当此属性为true时,表示此视图时一个启用了无障碍功能的元素。默认情况下,所有可触摸操作的元素都是无障碍功能元素。
onAccessibilityTap function#
当accessible为true时,如果用户对一个已选中的无障碍元素做了一个双击手势时,系统会调用此函数。(译注:此事件是针对残障人士,并非是一个普通的点击事件。如果要为View添加普通点击事件,请直接使用Touchable系列组件替代View,然后添加onPress函数)。
当组件挂载或者布局变化的时候调用,参数为:
{nativeEvent: { layout: {x, y, width, height}}}
这个事件会在布局计算完成后立即调用一次,不过收到此事件时新的布局可能还没有在屏幕上呈现,尤其是一个布局动画正在进行中的时候。
onMagicTapfunction
当accessible为true时,如果用户做了一个双指轻触(Magic tap)手势,系统会调用此函数。
onMoveShouldSetResponder function
onMoveShouldSetResponderCapture function
对于大部分的触摸处理,你只需要用TouchableHighlight或TouchableOpacity包装你的组件
onResponderTermination Requestfunction
onStartShouldSetResponder function
onStartShouldSetResponderCapture function
pointerEventsenum('box-none', 'none', 'box-only', 'auto')
用于控制当前视图是否可以作为触控事件的目标。
auto:视图可以作为触控事件的目标。
none:视图不能作为触控事件的目标。
box-none:视图自身不能作为触控事件的目标,但其子视图可以
removeClippedSubviewsbool
这是一个特殊的性能相关的属性,由RCTView导出。在制作滑动控件时,如果控件有很多不在屏幕内的子视图,会非常有用。
要让此属性生效,首先要求视图有很多超出范围的子视图,并且子视图和容器视图(或它的某个祖先视图)都应该有样式overflow: hidden。