#<view>

A container element similar to HTML's <div>. Like <div>, <view> is a versatile container element that can hold other elements and serves as the foundation for building layouts. All attributes, events, and methods available on <view> can be used by other elements.

#Usage

#As a Drawing Container

viewsrc/App.tsx

Preview

#As a Layout Container

viewsrc/App.tsx

Preview

#Attribute

Attributes and their values are used to describe the behavior and appearance of elements.

#name

// DefaultValue undefined
name?: string

Used to specify the name of the element, generally for native to operate the corresponding node from the native side through findViewByName.

#id

// DefaultValue undefined
id?: string;

Used to specify the unique identity of the element, which can be used by the front-end API to find and operate the corresponding node, such as invoke.

id?: string;

#style

style?: string;

Used to apply inline styles to elements.

#class

class?: string;

Used to specify one or more class names for an element, which can be used in CSS to apply styles.

#className ReactLynx

className?: string;

In ReactLynx, use className to set CSS class names, equivalent to class.

#data-*

data-*?: any;

Used to specify additional information for the element, which can be obtained in Event.

#flatten

Android only

flatten?: boolean;

Only available on Android platform, used to force specific nodes to create corresponding Android Views.

#exposure-id

// DefaultValue: undefined
exposure-id?: string

Specify whether the target node needs to listen to exposure/anti-exposure events.

#exposure-scene

// DefaultValue: undefined
exposure-scene?: string

Specify the exposure scene of the target node, and use it together with exposure-id to uniquely identify the node that needs to monitor exposure.

#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;

Specify the boundary scaling value of the target node itself in the exposure detection, which affects the viewport intersection judgment of the target node. Each node can have its own boundary scaling value.

Before using this capability, you also need to set enable-exposure-ui-margin for the current node.

#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;

Specify the screen boundary scaling value referenced by the target node in the exposure detection task, which affects the viewport intersection judgment of the target node. Each node can have its own screen boundary scaling value.

#exposure-area

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

Specify the viewport intersection ratio of the target node that can trigger the exposure event. When it is greater than this ratio, the exposure event is triggered. When it is less than this ratio, the reverse exposure event is triggered. By default, the exposure event is triggered when the target node is exposed.

#enable-exposure-ui-margin

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

Specify whether the target node supports the exposure-ui-margin-* properties.

Setting it to true will change the behavior of exposure-screen-margin-* and may cause the lazy loading of the scrollable container to fail.

#enable-exposure-ui-clip

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

Specify whether the exposure detection task takes into account the viewport clipping of the parent node. When set to true, nodes outside the parent node viewport cannot trigger exposure, and when set to false, nodes outside the parent node viewport can trigger exposure.

#accessibility-element

// DefaultValue: image and text nodes are true by default, and other nodes are false by default
accessibility-element?: boolean

Set whether the node supports accessibility.

#accessibility-label

// DefaultValue: undefined
accessibility-label?: string

Set the content of the node voice broadcast.

If the <text/> node does not set this attribute, the <text/> node defaults to the <text/> content.

When a node turns on the accessibility-element attribute, it is recommended to set the accessibility-label at the same time, so that the meaning of the current node can be more clearly expressed.

#accessibility-trait

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

Set the type characteristics of the node. The system will have specific supplements to the playback content for different types of nodes.

#accessibility-elements

// DefaultValue: undefined
accessibility-elements?: string

Customize the focus order of child nodes. This property is set on the parent node, and the focus order of its child nodes will be focused according to the order of the child node id specified by the accessibility-elements property.

If the parent node is set with the accessibility-elements property, only the child node with the id specified by the accessibility-elements property can be accessed, and other child nodes cannot be focused.

<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

The same as accessibility-elements, but the corresponding id is a11y-id.

#accessibility-elements-hidden

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

Marks the current node and all its child nodes as non-accessible nodes.

#accessibility-exclusive-focus

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

This property can be set for any node. In accessibility mode, sequential navigation will only focus on the child nodes under these nodes.

<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',
    }}
  >
    This node has accessibility-exclusive-focus set to true, so only the three
    text nodes inside it will be focused.
    <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

Different from id, it is used to identify barrier-free nodes separately.

#ios-platform-accessibility-id

iOS only

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

Used to specify the accessibility identifier of a UIView in iOS. It is only used when the platform-level accessibility framework is accessed.

#user-interaction-enabled

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

Specifies whether the target node and its child nodes can respond to Lynx touch events. This property does not affect platform-level gestures (such as scrolling of scroll-view).

#native-interaction-enabled

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

Specify whether the target node consumes platform-layer touch events, affects platform-layer gestures (such as scrolling of scroll-view), does not affect Lynx touch events, and can achieve similar platform-layer gesture penetration/interception effects.

#block-native-event

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

Specify whether to block platform layer gestures outside Lynx when the target node is on the event response chain, which can achieve an effect similar to blocking the platform layer side sliding back.

#block-native-event-areas

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

Specifies a touch area that blocks platform-layer gestures outside of Lynx. When the target node is in the event response chain and a touch is placed in the specified area of ​​the target node, platform-layer gestures will be blocked, achieving an effect similar to preventing platform-layer side-swipe back.

This two-dimensional array contains arrays containing 4 elements. The 4 elements are x, y, width, and height, in units of px or %, representing the position, width, and height of the touch area within the target node.

For example, [['0px', '0px', '50%', '50%'], ['50%', '50%', '50%', '50%']] indicates that platform-layer gestures outside of Lynx will be blocked when touches are placed in the upper left and lower right areas of the node.

#consume-slide-event

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

Specifies the angle range within which all platform-level swipe gestures are blocked. When the target node is in the event response chain and the swipe angle is within this range, all platform-level swipe gestures are blocked. However, Lynx touch events continue to function, allowing front-end scrolling containers that consume swipes in the specified direction. However, native scrolling based on platform-level gestures is blocked.

This two-dimensional array contains several 2-element arrays, where the 2 elements are start and end, representing the start and end angles, respectively. The swipe angle is determined by the finger's press position and the finger's movement position.

For example, [[-180, -135], [-45, 45], [135, 180]] indicates that all platform-level swipe gestures are blocked when the swipe direction is horizontal, but they are enabled when the swipe direction is vertical.

#event-through

// DefaultValue: false
event-through?: boolean

Specifies whether Lynx consumes touch events from the platform layer when a touch is on the target node, allowing for effects similar to display-only, non-interactive displays.

This property supports inheritance; that is, if event-through is not set for a child node, it inherits the event-through value from its parent node. Its active region is affected by event-through-active-regions. If not set, it defaults to the entire region of the target node.

#event-through-active-regions

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

Specifies the effective area for event-through.

This two-dimensional array contains several arrays containing 4 elements, where the 4 elements are x, y, width, and height, in units of px or %, representing the position, width, and height of the touch area within the target node.

For example, [['0px', '0px', '50%', '50%']] indicates that if the touch is in the upper left area of ​​the node, Lynx will not consume touch events from the platform layer.

#enable-touch-pseudo-propagation

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

Specify whether the target node supports the :active pseudo-class to continue bubbling up on the event response chain.

#hit-slop

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

Specify the touch event response hotspot of the target node, without affecting the platform layer gesture.

For example, {top: '10px', left: '10px', right: '10px', bottom: '10px'} or 10px means the touch hotspot of the node is expanded by 10px.

#ignore-focus

// DefaultValue: false
ignore-focus?: boolean

Specify whether to not grab focus when touching the target node. By default, the node grabs focus when clicking on it, which can achieve a similar effect of not closing the keyboard when clicking other areas.

This property supports inheritance, that is, when ignore-focus is not set on a child node, it will inherit the ignore-focus value of the parent node.

#ios-enable-simultaneous-touch

iOS only

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

Specify whether to force trigger the touchend event when the target node is on the event response chain, which can solve the problem that the iOS end does not trigger the touchend event but triggers the touchcancel event (the touchmove event is also not continuous) in some scenarios.

#__lynx_timing_flag

__lynx_timing_flag?: string;

Add this flag to the current element to monitor the performance of the lynx pipeline it participates in. When flagged, the lynx engine generates a PipelineEntry event once the element completes its final painting phase. This event can be observed and analyzed by registering a PerformanceObserver().For more detailed usage, see the Marking Lynx Pipeline.

#Events

The front end can set event handler property on the element to monitor the runtime behavior of the element.

#touchstart

touchstart: TouchEvent;

It belongs to touch event, which is triggered when the finger starts to touch the touch surface.

#touchmove

touchmove: TouchEvent;

It belongs to touch event, which is triggered when the finger moves on the touch surface.

#touchend

touchend: TouchEvent;

It belongs to touch event, which is triggered when the finger leaves the touch surface.

#touchcancel

touchcancel: TouchEvent;

It belongs to touch event, which is triggered when the touch event is interrupted by the system or Lynx external gesture.

#tap

tap: TouchEvent;

It belongs to touch event, which is triggered when the finger clicks on the touch surface.

This event and the longpress event are mutually exclusive in event monitoring, that is, if the front-end monitors both events at the same time, the two events will not be triggered at the same time, and longpress takes precedence.

#longpress

longpress: TouchEvent;

It belongs to the touch event, which is triggered when the finger is long pressed on the touch surface, and the interval between long press triggers is 500 ms.

#layoutchange

layoutchange: LayoutChangeDetailEvent;

It belongs to custom event, which is triggered when the target node layout is completed, and returns the position information of the target node relative to the LynxView viewport coordinate system.

#uiappear

uiappear: UIAppearanceDetailEvent;

It belongs to custom event, which is triggered when the target node appears on the screen.

#uidisappear

uidisappear: UIAppearanceDetailEvent;

It belongs to custom event, which is triggered when the target node disappears from the screen.

#animationstart

animationstart: AnimationEvent;

It belongs to animation event, which is triggered when the Animation animation starts.

#animationend

animationend: AnimationEvent;

It belongs to animation event, which is triggered when the Animation animation ends.

#animationcancel

animationcancel: AnimationEvent;

It belongs to animation event, which is triggered when the Animation animation is canceled.

#animationiteration

animationiteration: AnimationEvent;

It belongs to animation event, which is triggered every time the Animation animation is executed in a loop.

#transitionstart

transitionstart: TransitionEvent;

It belongs to animation event, which is triggered when the Transition animation starts.

#transitionend

transitionend: TransitionEvent;

It belongs to animation event, which is triggered when the Transition animation ends.

#transitioncancel

transitioncancel: TransitionEvent;

It belongs to animation event, which is triggered when the Transition animation is canceled.

#Method

The front end can execute the element method through the SelectorQuery API.

#boundingClientRect

lynx
  .createSelectorQuery()
  .select('#box')
  .invoke({
    method: 'boundingClientRect',
    params: {
      androidEnableTransformProps: true, // Specifies whether to consider the transform attribute when calculating the position on Android. The default value is false.
      relativeTo: null, // Specify the reference node, relative to LynxView by default.
    },
    success: function (res) {
      console.log(res);
    },
    fail: function (error) {
      console.log(error);
    },
  })
  .exec();

The front end can call this method to obtain the width, height and position information of the target node.

#takeScreenshot

lynx
  .createSelectorQuery()
  .select('#my-view')
  .invoke({
    method: 'takeScreenshot',
    params: {
      format: 'jpeg', // Specify the image format, supports jpeg and png, the default is jpeg.
      scale: 0.5, // Specify the image quality, 0 < scale <= 1, the default is 1, the smaller the value, the blurrier and smaller the size.
    },
    success: function (res) {
      console.log(res);
    },
    fail: function (res) {
      console.log(res.code, res.data);
    },
  })
  .exec();

The front end can call this method to obtain the base64 image of the target node.

#requestAccessibilityFocus

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

The front end can call this method to focus the accessibility focus on a barrier-free element.

#Compatibility