#<view>

一个类似 HTML <div> 的容器元素。与 <div> 类似，<view> 是一个多功能的容器元素，可以容纳其他元素，并作为构建布局的基础。所有 <view> 上可用的属性、事件和方法都可以被其他元素使用。

#使用指南

#作为绘制容器

viewsrc/App.tsx

Code

预览

#作为布局容器

viewsrc/App.tsx

Code

预览

#属性

属性名和属性值用于描述元件的行为和外观。

#name

// DefaultValue undefined
name?: string

用来指定组件的名字，一般是供 native 通过 findViewByName 来从 native 侧操作对应的节点。

#id

// DefaultValue undefined
id?: string;

用来指定组件唯一的身份标识，可供前端 API 来查找并操作对应的节点，比如 invoke。

id?: string;

#style

style?: string;

用于在元件上应用行内（inline）样式。

#class

class?: string;

用于为元件指定一个或多个类名，这些类名可以在 CSS 中使用来应用样式。

#className ReactLynx

className?: string;

在 ReactLynx 中请使用 className 来设置 CSS 的类名，用法同 class。

#data-*

data-*?: any;

用于为元件指定额外的信息，这些信息可以在 Event 中获取。

#flatten

Android

flatten?: boolean;

只有 Android 平台可以生效，用来强制将特定的节点创建对应的 Android View。

#exposure-id

// DefaultValue: undefined
exposure-id?: string

指定目标节点是否需要监听曝光/反曝光事件。

#exposure-scene

// DefaultValue: undefined
exposure-scene?: string

指定目标节点的曝光场景，与 exposure-id 一起用于对需要监听曝光的节点进行唯一标识。

#exposure-ui-margin-*

// DefaultValue: '0px'
exposure-ui-margin-top?: string;
exposure-ui-margin-right?: string;
exposure-ui-margin-bottom?: string;
exposure-ui-margin-left?: string;

指定曝光检测中目标节点自身的边界缩放值，影响目标节点的视口交叉判断，每一个节点可以有自己的自身边界缩放值。

#exposure-screen-margin-*

// DefaultValue: '0px'
exposure-screen-margin-top?: string;
exposure-screen-margin-right?: string;
exposure-screen-margin-bottom?: string;
exposure-screen-margin-left?: string;

指定曝光检测任务中目标节点参考的屏幕边界缩放值，影响目标节点的视口交叉判断，每一个节点可以有自己的屏幕边界缩放值。

#exposure-area

// DefaultValue: '0%'
exposure-area?: string

指定目标节点可以触发曝光事件的视口交叉比例，大于该比例时触发曝光事件，小于该比例时触发反曝光事件，默认目标节点露出即触发曝光事件。

#enable-exposure-ui-margin

// DefaultValue: false
enable-exposure-ui-margin?: boolean

指定目标节点是否支持 exposure-ui-margin-* 属性。

#enable-exposure-ui-clip

// DefaultValue: false
enable-exposure-ui-clip?: boolean

指定曝光检测任务中是否考虑父节点的视口裁剪。当设置为 true 时，父节点视口外的节点无法触发曝光，当设置为 false 时，父节点视口外的节点可以触发曝光。

#accessibility-element

// DefaultValue: image 和 text 节点默认是 true，其他节点默认值为 false
accessibility-element?: boolean

设置节点是否支持无障碍。

#accessibility-label

// DefaultValue: undefined
accessibility-label?: string

设置节点语音播报的内容。

如果 <text/> 节点不设置该属性，则 <text/> 节点默认 accessibility-label 是 <text/> 的内容。

当一个节点开启 accessibility-element 属性后，建议同时设置 accessibility-label，这样可以更清楚地表达当前节点的含义。

#accessibility-trait

// DefaultValue: "none"
accessibility-traits?: "none" | "button" | "image" | "text"

设置节点的类型特征。系统对不同类型的节点，播放内容会有特定的补充。

#accessibility-elements

// DefaultValue: undefined
accessibility-elements?: string

自定义子节点的聚焦顺序。该属性设置在父节点上，其子节点的聚焦顺序会根据 accessibility-elements 属性指定子节点 id 的顺序进行聚焦。

如果父节点设置了 accessibility-elements 属性，那么仅可访问 accessibility-elements 属性指定 id 的子节点，其他子节点则不可以聚焦。

<view
  style={{
    width: '100%',
    height: '250px',
    marginTop: '20px',
    display: 'linear',
    backgroundColor: 'grey',
  }}
  accessibility-elements="view-3,view-2,view-5,view-1,view-4"
>
  {[1, 2, 3, 4, 5].map((value) => {
    return (
      <view
        style={`height: 40px; margin: 5px; background-color: white;`}
        id={`view-${value}`}
        accessibility-element="true"
        accessibility-label={`view-${value}`}
      >
        <text>text-{value}</text>
      </view>
    );
  })}
</view>

#accessibility-elements-a11y

// DefaultValue: undefined
accessibility-elements-a11y?: string

作用等同于 accessibility-elements, 但是对应的 id 是 a11y-id。

#accessibility-elements-hidden

// DefaultValue: false
accessibility-elements-hidden?: boolean

标记当前节点及其所有子节点都不会成为无障碍节点。

#accessibility-exclusive-focus

// DefaultValue: false
accessibility-exclusive-focus?: boolean

该属性可以被任何节点设置，在无障碍模式下，顺序导航只会聚焦到这些节点下的子节点。

<view
  accessibility-element={false}
  style={{
    flexDirection: 'column',
    backgroundColor: backgroundColor,
    opacity: opacity,
    height: '200px',
  }}
>
  <view
    accessibility-element={false}
    accessibility-exclusive-focus={true}
    style={{
      flexDirection: 'column',
      backgroundColor: 'grey',
      opacity: 0.6,
      position: 'absolute',
      alignItems: 'center',
      width: '100%',
      top: '20px',
    }}
  >
    // 当前节点设置了 accessibility-exclusive-focus 为 //
    true，则只会聚焦到它内部的三个 text 节点
    <text style={{ fontSize: '20px' }}>overlap text 1</text>
    <text style={{ fontSize: '20px' }}>overlap text 2</text>
    <text style={{ fontSize: '20px' }}>overlap text 3</text>
  </view>
  <text style={{ fontSize: '20px', width: '30%' }}>bottom text 1</text>
  <text style={{ fontSize: '20px', width: '30%' }}>bottom text 2</text>
  <text style={{ fontSize: '20px', width: '30%' }}>bottom text 3</text>
</view>

#a11y-id

// DefaultValue: undefined
a11y-id?: string

区别于 id，用于单独标识无障碍节点。

#ios-platform-accessibility-id

iOS

// DefaultValue: undefined
ios-platform-accessibility-id?: string

用于指定 iOS 中一个 UIView 的无障碍标识符，仅限平台层无障碍框架接入时才需使用。

#user-interaction-enabled

// DefaultValue: true
user-interaction-enabled?: boolean

指定目标节点及其子节点是否能够响应 Lynx 的触摸事件，该属性不会影响平台层手势（比如 scroll-view 的滚动）。

#native-interaction-enabled

// DefaultValue: true for iOS and Harmony, false for Android
native-interaction-enabled?: boolean

指定目标节点是否消费平台层的触摸事件，影响平台层手势（比如 scroll-view 的滚动），不影响 Lynx 的触摸事件，可以实现类似平台层手势穿透/拦截的效果。

#pan-intercept-direction

// DefaultValue: 2 /* none */
pan-intercept-direction?:
[ 0 /* horizontal */
| 1 /* vertical */
| 2 /* none */ ]

指定阻止特定方向的平台层滑动手势，需配合 pan-intercept-scope 使用。当滑动方向和 pan-intercept-direction 一致时，会根据 pan-intercept-scope 来判断是否拦截对应节点上的平台层滑动手势。

比如 pan-intercept-direction 设置为 0 时，表示滑动方向为水平方向时，会根据事件响应链上距离用户最近的设置了 pan-intercept-direction 为 0 的节点的 pan-intercept-scope 来判断是否拦截对应节点上的平台层滑动手势。

#pan-intercept-scope

// DefaultValue: 6 /* none */
pan-intercept-scope?:
[ 0 /* self */
| 1 /* ancestors */
| 2 /* descendants */
| 3 /* self-and-ancestors */
| 4 /* self-and-descendants */
| 5 /* all */
| 6 /* none */ ]

指定阻止特定方向的平台层滑动手势生效的范围，需配合 pan-intercept-direction 使用。比如 pan-intercept-scope 设置为 0 时，表示仅拦截目标节点上的平台层滑动手势，设置为 1 时，表示拦截目标节点的所有祖先节点上的平台层滑动手势。

#block-native-event

// DefaultValue: false
block-native-event?: boolean

指定目标节点在事件响应链上时是否阻止 Lynx 外的平台层手势，可以实现类似阻止平台层侧滑返回的效果。

#block-native-event-areas

// DefaultValue: []
block-native-event-areas?: [string, string, string, string][]

指定阻止 Lynx 外平台层手势生效的触摸区域，当目标节点在事件响应链上并且触摸在目标节点的指定区域时，平台层手势将被阻止，可以实现类似阻止平台层侧滑返回的效果。

该二维数组内是若干个包含 4 个元素的数组，4 个元素依次为 x、y、width、height，单位为 px 或 %，表示触摸区域在目标节点中的位置和宽高。

比如 [['0px', '0px', '50%', '50%'], ['50%', '50%', '50%', '50%']] 表示触摸在节点的左上和右下区域时，Lynx 外的平台层手势会被阻止。

#consume-slide-event

// DefaultValue: []
consume-slide-event?: [number, number][]

指定阻止所有平台层滑动手势生效的角度范围，当目标节点在事件响应链上并且滑动角度在角度范围内时，所有平台层滑动手势将被阻止，但 Lynx 的触摸事件依旧生效，可以实现消费指定方向滑动的前端滚动容器，此时基于平台层手势的原生滚动会被阻止。

该二维数组是若干个包含 2 个元素的数组，2 个元素依次为 start、end，表示起始角度和结束角度，滑动角度由手指按下的位置和手指移动的位置确定。

比如 [[-180, -135], [-45, 45], [135, 180]] 表示滑动方向为横向时，所有平台层滑动手势将被阻止，但滑动方向为纵向时，平台层滑动手势可以生效。

#event-through

// DefaultValue: false
event-through?: boolean

指定触摸在目标节点上时 Lynx 是否消费平台层的触摸事件，可以实现类似只展示不交互的效果。

该属性支持继承，即子节点未设置 event-through 时，会继承父节点的 event-through 值。其生效区域受 event-through-active-regions 的影响，未设置时默认为目标节点的所有区域。

#event-through-active-regions

// DefaultValue: []
event-through-active-regions?: [string, string, string, string][]

指定 event-through 的生效区域。

该二维数组内是若干个包含 4 个元素的数组，4 个元素依次为 x、y、width、height，单位为 px 或 %，表示触摸区域在目标节点中的位置和宽高。

比如 [['0px', '0px', '50%', '50%']] 表示触摸在节点的左上区域时，Lynx 不消费平台层的触摸事件。

#enable-touch-pseudo-propagation

// DefaultValue: true
enable-touch-pseudo-propagation?: boolean

指定目标节点是否支持 :active 伪类在事件响应链上继续向上冒泡。

#hit-slop

// DefaultValue: '0px' 或 {top: '0px', left: '0px', right: '0px', bottom: '0px'}
hit-slop?: object | string

指定目标节点的触摸事件响应热区，不影响平台层手势。

比如 {top: '10px', left: '10px', right: '10px', bottom: '10px'} 或 10px 表示节点的触摸热区扩大 10px。

#ignore-focus

// DefaultValue: false
ignore-focus?: boolean

指定触摸在目标节点上时是否不抢占焦点，默认点击在节点上时节点会抢占焦点，可以实现类似点击其他区域时键盘不收起的效果。

该属性支持继承，即子节点未设置 ignore-focus 时，会继承父节点的 ignore-focus 值。

#ios-enable-simultaneous-touch

iOS

// DefaultValue: false
ios-enable-simultaneous-touch?: boolean

指定目标节点在事件响应链上时是否强制触发 touchend 事件，可以解决部分场景下 iOS 端不触发 touchend 事件但触发 touchcancel 事件（touchmove 事件也没有连续）的问题。

#__lynx_timing_flag

__lynx_timing_flag?: string;

标记并监控渲染该元件的 Lynx Pipeline。当 Lynx Pipeline 中出现 __lynx_timing_flag 变化，并且该 Lynx Pipeline 触发最终渲染时，将产生 PipelineEntry 性能事件，可通过 PerformanceObserver() 接收相关性能事件。

__lynx_timing_flag 可以设置为任意字符串：

• 设置为 undefined 或空字符串时，无作用。
• 设置为 __lynx_timing_actual_fmp 时，可用于统计 ActualFmp 指标，会产生 MetricActualFmpEntry 性能指标事件和 PipelineEntry 渲染流水线性能事件。
• 设置为其他字符串时，监控并产生 PipelineEntry 性能事件。

#事件

前端可以在元件上设置事件处理器属性来监听元件的运行时行为。

#touchstart

touchstart: TouchEvent;

属于触摸事件，手指开始接触触摸平面时触发。

#touchmove

touchmove: TouchEvent;

属于触摸事件，手指在触摸平面上移动时触发。

#touchend

touchend: TouchEvent;

属于触摸事件，手指从触摸平面上离开时触发。

#touchcancel

touchcancel: TouchEvent;

属于触摸事件，触摸事件被系统或 Lynx 外部手势中断时触发。

#tap

tap: TouchEvent;

属于触摸事件，手指在触摸平面上单击时触发。

#longpress

longpress: TouchEvent;

属于触摸事件，手指在触摸平面上长按时触发，长按触发的时间间隔为 500 ms。

#click

click: TouchEvent;

属于触摸事件，手指在触摸平面上单击时触发。

#layoutchange

layoutchange: LayoutChangeDetailEvent;

属于自定义事件，目标节点排版完成时触发，返回目标节点相对于 LynxView 视口坐标系的位置信息。

#uiappear

uiappear: UIAppearanceDetailEvent;

属于自定义事件，目标节点在屏幕上出现时触发。

#uidisappear

uidisappear: UIAppearanceDetailEvent;

属于自定义事件，目标节点在屏幕上消失时触发。

#animationstart

animationstart: AnimationEvent;

属于动画事件，在 Animation 动画开始时会触发。

#animationend

animationend: AnimationEvent;

属于动画事件，在 Animation 动画结束时会触发。

#animationcancel

animationcancel: AnimationEvent;

属于动画事件，在 Animation 动画取消时会触发。

#animationiteration

animationiteration: AnimationEvent;

属于动画事件，在 Animation 动画每次循环执行时会触发。

#transitionstart

transitionstart: TransitionEvent;

属于动画事件，在 Transition 动画开始时触发。

#transitionend

transitionend: TransitionEvent;

属于动画事件，在 Transition 动画结束时触发。

#transitioncancel

transitioncancel: TransitionEvent;

属于动画事件，在 Transition 动画取消时触发。

#方法

前端可以通过 SelectorQuery API 执行元件的方法。

#boundingClientRect

lynx
  .createSelectorQuery()
  .select('#box')
  .invoke({
    method: 'boundingClientRect',
    params: {
      iOSEnableAnimationProps: false, // 指定 iOS 上计算位置时是否考虑 animation 属性，默认为 false
      androidEnableTransformProps: true, // 指定 Android 上计算位置时是否考虑 transform 属性，默认为 false
      relativeTo: null, // 指定参考节点（通过 idSelector 选择节点），默认相对于 LynxView，也可以设置为 "screen" 表示相对于屏幕坐标系
    },
    success: function (res) {
      console.log(res);
    },
    fail: function (error) {
      console.log(error);
    },
  })
  .exec();

前端可以调用该方法来获取目标节点的宽高和位置信息。

#takeScreenshot

lynx
  .createSelectorQuery()
  .select('#my-view')
  .invoke({
    method: 'takeScreenshot',
    params: {
      format: 'jpeg', // 指定图片格式，支持 jpeg、png，默认为 jpeg
      scale: 0.5, // 指定图片质量，0 < scale <= 1，默认为 1，越小越模糊，体积也越小
      androidEnablePixelCopy: false, // 指定 Android 上是否用 PixelCopy 方式截图，默认为 false
    },
    success: function (res) {
      console.log(res);
    },
    fail: function (res) {
      console.log(res.code, res.data);
    },
  })
  .exec();

前端可以调用该方法来获取目标节点的 base64 图片。

#requestAccessibilityFocus

lynx
  .createSelectorQuery()
  .select('#customId')
  .invoke({
    method: 'requestAccessibilityFocus',
    params: {},
    success: function (res) {
      console.log(res);
    },
    fail: function (res) {
      console.log(res);
    },
  })
  .exec();

前端可以调用该方法将无障碍焦点聚焦到某个无障碍元件。

#兼容性