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

#classNameReactLynx

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.

#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

// 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, 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?: number [number []]

Specify whether to block platform layer gestures outside Lynx when the target node is on the event response chain and the touch is in the specified area of ​​the target node, which can achieve a similar effect of blocking the platform layer side sliding back.

The inner array is an array containing 4 numbers, namely x, y, width, height, indicating the position of the touch area in the target node.

#consume-slide-event

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

Specify the target node to slide a specific angle on the event response chain, whether the platform layer gesture responds, does not affect the touch event of Lynx, and can realize a front-end scrolling container similar to consuming the specified direction of sliding.

The inner array is an array containing 2 numbers, namely start and end, indicating the starting angle and the ending angle.

#event-through

// DefaultValue: false
event-through?: boolean

Specifies whether the touch event of the platform layer is distributed to Lynx when the touch is on the target node, which can achieve a similar effect of only displaying without interaction. This property supports inheritance.

This property can only ensure that Lynx does not consume the touch event of the platform layer, but the parent view of LynxView may consume the touch event, resulting in failure of penetration.

#enable-touch-pseudo-propagation

// DefaultValue: false
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.

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

In addition, it also supports inheritance, that is, the default value of the child node is the ignore-focus value of the parent node, and the child node can override this value.

#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

LCD tables only load in the browser