View

View

构建用户界面的最基本的组件View是支持使用柔性盒，样式，某些触摸处理和辅助功能控件进行布局的容器。View直接映射到本地视图相当于在任何平台阵营本地运行上，无论是一UIView，<div>，android.view，等。

View 被设计为嵌套在其他视图中，并且可以具有0到多个任何类型的子项。

这个例子创建了一个View包含两个彩色框和一个文本组件的填充行。

class ViewColoredBoxesWithText extends Component {
  render() {
    return (
      <View style={{flexDirection: 'row', height: 100, padding: 20}}>
        <View style={{backgroundColor: 'blue', flex: 0.3}} />
        <View style={{backgroundColor: 'red', flex: 0.5}} />
        <Text>Hello World!</Text>
      </View>
    
  }
}

Views被设计StyleSheet用于清晰度和性能，尽管内联样式也被支持。

合成触摸事件

对于View响应者道具（例如onResponderMove），传递给他们的合成触摸事件具有以下形式：

• nativeEvent

道具

ViewPropTypes props...

accessibilityLabel?: node

覆盖用户与元素交互时由屏幕阅读器读取的文本。默认情况下，标签是通过遍历所有孩子并累积所有Text以空格分隔的节点构建的。

accessible?: bool

何时true，表示该视图是无障碍元素。默认情况下，所有可触摸的元素都可以访问。

hitSlop?: {top: number, left: number, bottom: number, right: number}

这定义了触摸事件离视图有多远。典型的接口指南推荐触摸目标至少为30-40个点/密度独立像素。

例如，如果可触摸视图的高度为20，则触摸高度可以扩展到40 hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}

触摸区域永远不会超过父视图边界，并且如果触摸触及两个重叠的视图，则兄弟视图的Z索引总是优先。

nativeID?: string

用于从本地类定位此视图。

这将禁用此视图的“仅布局视图移除”优化！

onAccessibilityTap?: function

如果accessible属实，系统会尝试在用户执行辅助功能时触发此功能。

onLayout?: function

调用装载和布局更改：

{nativeEvent: { layout: {x, y, width, height}}}

一旦布局计算完成后立即触发此事件，但新布局可能尚未在接收事件时反映在屏幕上，特别是在布局动画正在进行时。

onMagicTap?: function

当accessible是true，当用户执行魔敲击手势的系统将调用此函数。

onMoveShouldSetResponder?: function

这个观点是否想要“声称”触摸响应？View当它不是响应者时，这被称为每一次触摸移动。

View.props.onMoveShouldSetResponder: (event) => [true | false]，其中event是如上所述的合成触摸事件。

onMoveShouldSetResponderCapture?: function

如果父母View想要阻止孩子View成为移动中的回应者，则应该有该处理者返回true。

View.props.onMoveShouldSetResponderCapture: (event) => [true | false]，其中event是如上所述的合成触摸事件。

onResponderGrant?: function

该视图正在响应触摸事件。这是突出显示用户正在发生的事情的时候。

View.props.onResponderGrant: (event) => {}，其中event是如上所述的合成触摸事件。

onResponderMove?: function

用户正在移动他们的手指。

View.props.onResponderMove: (event) => {}，其中event是如上所述的合成触摸事件。

onResponderReject?: function

另一个响应者已经处于活动状态，不会将其释放给View要求成为响应者的人。

View.props.onResponderReject: (event) => {}，其中event是如上所述的合成触摸事件。

onResponderRelease?: function

触摸结束时触发。

View.props.onResponderRelease: (event) => {}，其中event是如上所述的合成触摸事件。

onResponderTerminate?: function

响应者已被带走View。呼叫之后可能会被其他视图占用onResponderTerminationRequest，或者操作系统可能会在没有询问的情况下采取其他操作（例如，iOS上的控制中心/通知中心发生）

View.props.onResponderTerminate: (event) => {}，其中event是如上所述的合成触摸事件。

onResponderTerminationRequest?: function

其他一些人View希望成为响应者，并要求View释放其响应者。返回true允许其发布。

View.props.onResponderTerminationRequest: (event) => {}，其中event是如上所述的合成触摸事件。

onStartShouldSetResponder?: function

这种观点是否希望成为触摸开始时的回应者？

View.props.onStartShouldSetResponder: (event) => [true | false]，其中event是如上所述的合成触摸事件。

onStartShouldSetResponderCapture?: function

如果父母View想要阻止孩子View在触摸开始时成为回应者，则应该有该处理器返回true。

View.props.onStartShouldSetResponderCapture: (event) => [true | false]，其中event是如上所述的合成触摸事件。

pointerEvents?: enum('box-none', 'none', 'box-only', 'auto')

控制是否View可以成为触摸事件的目标。

• 'auto'：视图可以是触摸事件的目标。

removeClippedSubviews?: bool

这是一个特殊的性能属性，RCTView当有许多子视图时，滚动内容非常有用，其中大部分都是离屏的。要使此属性有效，它必须应用于包含许多子视图的视图，这些子视图超出其界限。子视图还必须具有overflow: hidden包含视图（或其超级视图之一）。

style?: stylePropType

testID?: string

用于在端到端测试中定位此视图。

这将禁用此视图的“仅布局视图移除”优化！

androidaccessibilityComponentType？： AccessibilityComponentTypes

指示可访问性服务将UI组件视为本地组件。仅适用于Android。

可能的值是以下之一：

• 'none'

androidaccessibilityLiveRegion?: enum('none', 'polite', 'assertive')

指示无障碍服务是否应在此视图更改时通知用户。仅适用于Android API> = 19。可能的值：

• 'none' - 辅助功能服务不应该公布对此视图的更改。

查看Android View文档以供参考。

androidcollapsable?: bool

仅用于布局其子项或以其他方式不绘制任何内容的视图可以作为优化自动从本地层次结构中删除。将此属性设置false为禁用此优化，并确保它View存在于本机视图层次结构中。

androidimportantForAccessibility?: enum('auto', 'yes', 'no', 'no-hide-descendants')

控制视图对可访问性的重要性，即如果视图触发辅助功能事件并将其报告给查询屏幕的辅助功能服务。仅适用于Android。

可能的值：

• 'auto' - 系统确定视图对可访问性是否重要 - 默认（推荐）。

查看Android importantForAccessibility文档以供参考。

androidneedsOffscreenAlphaCompositing?: bool

是否View需要渲染离屏并与alpha合成以保持100％正确的颜色和混合行为。默认值（false）返回绘制组件及其子元素，并将alpha应用于用于绘制每个元素的paint，而不是将整个组件渲染为屏幕外并将其用alpha值合成。在View您设置不透明度的情况下，此默认设置可能会引起注意并且不受欢迎，因为它具有多个重叠元素（例如多个重叠View的元素，或文本和背景）。

渲染屏幕外以保留正确的alpha行为对于非本地开发人员而言非常昂贵并且难以调试，这就是为什么默认情况下未打开它的原因。如果您确实需要为动画启用此属性，请考虑将其与renderToHardwareTextureAndroid结合使用（如果视图内容是静态的（即，不需要重绘每帧）。如果启用了该属性，则此视图将在屏幕外显示一次，保存在硬件纹理中，然后在每帧都以alpha形式合成到屏幕上，而无需切换GPU上的渲染目标。

androidrenderToHardwareTextureAndroid?: bool

这是否View应该使自己（及其所有孩子）在GPU上呈现单一硬件纹理。

在Android上，这对于只修改不透明度，旋转，平移和/或缩放比例的动画和交互很有用：在这些情况下，视图不必重新绘制，并且不需要重新执行显示列表。纹理可以重新使用，并可以用不同的参数重新合成。缺点是这可能会占用有限的视频内存，所以在交互/动画结束时应该将该道具重新设置为false。

iosaccessibilityTraits?: AccessibilityTraits, [AccessibilityTraits]

为屏幕阅读器提供附加特性。默认情况下，除非在元素中另外指定，否则不提供特征。

你可以提供一个特征或许多特征。

可能的值AccessibilityTraits是：

• 'none' - 元素没有特质。

请参阅无障碍指南了解更多信息。

iosaccessibilityViewIsModal?: bool

一个值，指示VoiceOver是否应忽略接收器的同级视图中的元素。默认是false。

请参阅无障碍指南了解更多信息。

iosshouldRasterizeIOS?: bool

View是否应该在合成之前将其渲染为位图。

在iOS上，这对于不修改此组件维度及其子级的动画和交互非常有用; 例如，在翻译静态视图的位置时，光栅化允许渲染器重新使用静态视图的缓存位图，并在每个帧中快速合成它。

栅格化会导致屏幕外的绘图过程，并且位图会消耗内存。使用此属性时进行测试和测量。

类型定义

属性

类型：

View属性