View
作为创建 UI 时最基础的组件,View
是一个支持 Flexbox 布局、样式、触摸响应、和一些无障碍功能的容器。不论在什么平台上,View
都直接对应当前平台的原生视图,无论它是 UIView
、div
还是 android.view.View
。
View
在设计上是可以嵌套使用的,也可以有任意多个任意类型的子视图。
下面的例子创建了一个 View
,包 含了两个有颜色的方块和一个自定义的组件,并且设置了一个内边距:
- 函数式组件
- Class 组件
View 的设计初衷是和 StyleSheet 搭配使用,这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用。
合成点击事件
用于 View
响应属性 (例如, onResponderMove
), 请参考点击事件对象的文档。
nativeEvent
changedTouches
- 从上一次事件以来的触摸事件数组。identifier
- 触摸事件的 ID。locationX
- 触摸事件相对元素位置的 X 坐标。locationY
- 触摸事件相对元素位置的 Y 坐标。pageX
- 触摸事件相对根元素位置的 X 坐标。pageY
- 触摸事件相对根元素位置的 Y 坐标。target
- 接收触摸事件的元素 ID.timestamp
- 触摸事件的时间标记,用来计算速度.touches
- 屏幕上所有当前触摸事件的数组.
文档
Props
onStartShouldSetResponder
设置这个视图是否要响应 touch start 事件。
View.props.onStartShouldSetResponder: (event) => [true | false]
, 其中 event
是一个合成点击事件对象。
类型 | 必需 |
---|---|
function | 否 |
accessibilityHint
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.
类型 | 必需 |
---|---|
string | 否 |
accessibilityLabel
设置当用户与此元素交互时,“读屏器”(对视力障碍人士的辅助功能)阅读的文字。默认情况下,这个文字会通过遍历所有的子元素并累加所有的文本标签来构建。
类型 | 必需 |
---|---|
node | 否 |
hitSlop
定义触摸事件在距离视图多远以内时可以触发的。典型的接口规范建议触摸目标至少要 30-40 点/密度-独立像素。
例如,一个可触摸的视图有 20 单位高,那么设置hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}
则可触摸高度会扩展到 40 单位。
触摸范围不会扩展到 父视图之外,另外如果触摸到两个重叠的视图,Z-index 高的元素会优先。
类型 | 必需 |
---|---|
object: {top: number, left: number, bottom: number, right: number} | 否 |
nativeID
用来从原生类定位这个视图
这个设置关闭了视图的'layout-only view removal'优化
类型 | 必需 |
---|---|
string | 否 |
onAccessibilityTap
当 accessible 为 true 时,如果用户对一个已选中的无障碍元素做了一个双击手势时,系统会调用此函数。(译注:此事件是针对残障人士,并非是一个普通的点击事件。如果要为 View 添加普通点击事件,请直接使用 Touchable 系列组件替代 View,然后添加 onPress 函数)。
类型 | 必需 |
---|---|
function | 否 |
onLayout
当组件挂载或者布局变化的时候调用,参数为::
{nativeEvent: { layout: {x, y, width, height}}}
这个事件会在布局计算完成后立即调用一次,不过收到此事件时新的布局可能还没有在屏幕上呈现,尤其是一个布局动画正在进行中的时候。
类型 | 必需 |
---|---|
function | 否 |
onMagicTap
当 accessible 为 true 时,如果用户做了一个双指轻触(Magic tap)手势,系统会调用此函数。
类型 | 必需 |
---|---|
function | 否 |
onAccessibilityEscape
When accessible
is true
, the system will invoke this function when the user performs the escape gesture.
类型 | 必需 |
---|---|
function | No |
onMoveShouldSetResponder
这个视图想要“认领”这个 touch move 事件吗?每当有 touch move 事件在这个视图中发生,并且这个视图没有被设置为这个 touch move 的响应时,这个函数就会被调用。
View.props.onMoveShouldSetResponder: (event) => [true | false]
, 其中 event 是一个合成触摸事件。
类型 | 必需 |
---|---|
function | 否 |