#<view>

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

#使用指南

#作为绘制容器

viewsrc/App.tsx

预览

#作为布局容器

viewsrc/App.tsx

预览

#属性

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

#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 中使用来应用样式。

#classNameReactLynx

className?: string;

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

#data-*

data-*?: any;

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

#flatten

Android only

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;

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

在使用此能力前，也需要对当前节点设置 enable-exposure-ui-margin。

#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-* 属性。

设置为 true 会改变 exposure-screen-margin-* 的行为，可能导致可滚动容器的懒加载失效。

#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

// 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, false for Android
native-interaction-enabled?: boolean

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

#block-native-event

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

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

#block-native-event-areas

// DefaultValue: []
block-native-event-areas?: number [number []]

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

内层数组是一个包含 4 个数字的数组，分别是 x、y、width、height，表示触摸区域在目标节点中的位置。

#consume-slide-event

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

指定目标节点在事件响应链上时滑动特定角度，平台层手势是否响应，不影响 Lynx 的触摸事件，可以实现类似消费指定方向滑动的前端滚动容器。

内层数组是一个包含 2 个数字的数组，分别是 start、end，表示起始角度和结束角度。

#event-through

// DefaultValue: false
event-through?: boolean

指定触摸在目标节点上时平台层的触摸事件是否分发到 Lynx，可以实现类似只展示不交互的效果。该属性支持继承。

该属性只能保证 Lynx 不消费平台层的触摸事件，但 LynxView 的父视图可能消费触摸事件导致穿透失效。

#enable-touch-pseudo-propagation

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

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

#hit-slop

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

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

#ignore-focus

// DefaultValue: false
ignore-focus?: boolean

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

此外，它还支持继承，即子节点的默认值为父节点的 ignore-focus 值，子节点可以覆盖该值。

#ios-enable-simultaneous-touch

iOS only

// 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 优先。

#longpress

longpress: TouchEvent;

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

#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: {
      androidEnableTransformProps: true, // 指定 Android 上计算位置时是否考虑 transform 属性，默认为 false
      relativeTo: null, // 指定参考节点，默认相对于 LynxView
    },
    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，越小越模糊，体积也越小
    },
    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();

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

#兼容性

LCD tables only load in the browser