@tarojs/components 4.0.0-canary.8 → 4.0.0

package/types/Slider.d.ts

@@ -3,29 +3,34 @@ import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 interface SliderProps extends StandardProps, FormItemProps {
   /** 最小值
    * @default 0
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   min?: number
   /** 最大值
    * @default 100
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   max?: number
   /** 步长，取值必须大于 0，并且可被(max - min)整除
    * @default 1
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   step?: number
   /** 是否禁用
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   disabled?: boolean
   /** 当前取值
    * @default 0
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   value?: number
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
+   * @unique
+   */
+  defaultValue?: string
   /** 背景条的颜色（请使用 backgroundColor）
    * @default "#e9e9e9"
    * @supported weapp, tt, qq, jd, harmony
@@ -38,27 +43,27 @@ interface SliderProps extends StandardProps, FormItemProps {
   selectedColor?: string
   /** 已选择的颜色
    * @default "#1aad19"
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   activeColor?: string
   /** 背景条的颜色
    * @default "#e9e9e9"
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   backgroundColor?: string
   /** 滑块的大小，取值范围为 12 - 28
    * @default 28
-   *  @supported weapp, swan, tt, qq, jd, h5, harmony
+   *  @supported weapp, swan, tt, qq, jd, h5, harmony, harmony_hybrid
    */
   blockSize?: number
   /** 滑块的颜色
    * @default "#ffffff"
-   * @supported weapp, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   blockColor?: string
   /** 是否显示当前 value
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   showValue?: boolean
   /** 组件名字，用于表单提交获取数据。
@@ -84,11 +89,11 @@ interface SliderProps extends StandardProps, FormItemProps {
    */
   ariaLabel?: string
   /** 完成一次拖动后触发的事件
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   onChange?: CommonEventFunction<SliderProps.onChangeEventDetail>
   /** 拖动过程中触发的事件
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   onChanging?: CommonEventFunction<SliderProps.onChangeEventDetail>
 }
@@ -99,7 +104,7 @@ declare namespace SliderProps {
 }
 /** 滑动选择器
  * @classification forms
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
  * @example_react
  * ```tsx
  * export default class PageView extends Component {

package/types/Slot.d.ts

@@ -17,7 +17,7 @@ interface SlotProps extends StandardProps {
 
 /** slot 插槽
  * @classification viewContainer
- * @supported weapp, swan, alipay, tt, jd, qq, h5
+ * @supported weapp, swan, alipay, tt, jd, qq, h5, harmony_hybrid
  * @example
  * ```tsx
  * import { Slot, View, Text } from '@tarojs/components'

package/types/Snapshot.d.ts

@@ -1,12 +1,21 @@
 import { ComponentType } from 'react'
-
 import { StandardProps } from './common'
 
 interface SnapshotProps extends StandardProps {
-  id: string
+  /**
+   * 渲染模式
+   * @supported weapp
+   * @default 'view'
+   *
+   * 可选值:
+   * - view: 以真实节点渲染
+   * - picture: 对子节点生成的内容截图渲染
+   */
+  mode: 'view' | 'picture'
 }
 
-/** 截图组件。
+/**
+ * 截图组件
  * 支持将其子节点的渲染结果导出成图片，该组件需配合 snapshot 接口使用。 目前仅在 Skyline 渲染引擎 下支持。
  * @classification skyline
  * @supported weapp

package/types/Span.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from './common'
+
+interface SpanProps extends StandardProps { }
+
+/**
+ * 用于支持内联文本和 image / navigator 的混排
+ * @classification skyline
+ * @supported weapp
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/span.html
+ */
+declare const Span: ComponentType<SpanProps>
+export { Span, SpanProps }

package/types/StickyHeader.d.ts

@@ -1,11 +1,24 @@
 import { ComponentType } from 'react'
 import { StandardProps } from './common'
-interface StickyHeaderProps extends StandardProps {}
+interface StickyHeaderProps extends StandardProps {
+   /**
+    * 吸顶时与顶部的距(px)
+    * @supported weapp
+    * @default 0
+    */
+   offsetTop?: number
+   /**
+    * 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距
+    * @supported weapp
+    * @default [0, 0, 0, 0]
+    */
+   padding?: [number, number, number, number]
+}
 
 /**
  * 吸顶布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。
  * @classification skyline
- * @supported weapp
+ * @supported weapp, harmony
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/sticky-header.html
  */
 declare const StickyHeader: ComponentType<StickyHeaderProps>

package/types/StickySection.d.ts

@@ -6,11 +6,17 @@ interface StickySectionProps extends StandardProps {
    * @default true
    */
   pushPinnedHeader?: boolean
+  /**
+   * 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距
+   * @supported weapp
+   * @default [0, 0, 0, 0]
+   */
+  padding?: [number, number, number, number]
 }
 /**
  * 吸顶布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点。仅 Skyline 支持。
  * @classification skyline
- * @supported weapp
+ * @supported weapp, harmony
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/sticky-section.html
  */
 declare const StickySection: ComponentType<StickySectionProps>

package/types/Swiper.d.ts

@@ -3,65 +3,63 @@ import { StandardProps, CommonEventFunction } from './common'
 interface SwiperProps extends StandardProps {
   /** 是否显示面板指示点
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   indicatorDots?: boolean
   /** 指示点颜色
    * @default "rgba(0, 0, 0, .3)"
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   indicatorColor?: string
   /** 当前选中的指示点颜色
    * @default "#000000"
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   indicatorActiveColor?: string
   /** 是否自动切换
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   autoplay?: boolean
   /** 当前所在滑块的 index
    * @default 0
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   current?: number
   /** 当前所在滑块的 item-id ，不能与 current 被同时指定
-   * @supported tt
+   * @supported swan, tt, qq, jd, h5, harmony_hybrid
    * @weapp deprecated
    * @default ""
-   * @supported tt
-   * @weapp deprecated
    */
   currentItemId?: string
   /** 自动切换时间间隔
    * @default 5000
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   interval?: number
   /** 滑动动画时长
    * @default 500
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony, harmony_hybrid
    */
   duration?: number
   /** 是否采用衔接滑动
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   circular?: boolean
   /** 滑动方向是否为纵向
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   vertical?: boolean
   /** 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
    * @default "0px"
-   * @supported weapp, alipay, swan, tt, qq, jd, h5
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
    */
   previousMargin?: string
   /** 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
    * @default "0px"
-   * @supported weapp, alipay, swan, tt, qq, jd, h5
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
    */
   nextMargin?: string
   /**
@@ -72,7 +70,7 @@ interface SwiperProps extends StandardProps {
   snapToEdge?: boolean
   /** 同时显示的滑块数量
    * @default 1
-   * @supported weapp, alipay, swan, tt, qq, jd, h5
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
    */
   displayMultipleItems?: number
   /** 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
@@ -92,12 +90,12 @@ interface SwiperProps extends StandardProps {
   disableTouch?: boolean
   /** 是否启用缩放
    * @default false
-   * @supported h5
+   * @supported h5, harmony_hybrid
    */
   zoom?: boolean
   /** 是否开启全屏
    * @default false
-   * @supported h5
+   * @supported h5, harmony_hybrid
    */
   full?: boolean
   /** swiper-item 可见时的 class。
@@ -154,7 +152,7 @@ interface SwiperProps extends StandardProps {
    */
   cacheExtent?: number
   /** current 改变时会触发 change 事件
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   onChange?: CommonEventFunction<SwiperProps.onChangeEventDetail>
   /** swiper-item 的位置发生改变时会触发 transition 事件
@@ -162,7 +160,7 @@ interface SwiperProps extends StandardProps {
    */
   onTransition?: CommonEventFunction<SwiperProps.onTransitionEventDetail>
   /** 动画结束时会触发 animationfinish 事件
-   * @supported weapp, swan, tt, qq, jd, h5, rn
+   * @supported weapp, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   onAnimationFinish?: SwiperProps['onChange']
   /** 动画结束时会触发 animationEnd 事件
@@ -217,7 +215,7 @@ declare namespace SwiperProps {
 /** 滑块视图容器。其中只可放置 swiper-item 组件，否则会导致未定义的行为。
  * > 不要为 `SwiperItem` 设置 **style** 属性，可以通过 class 设置样式。[7147](https://github.com/NervJS/taro/issues/7147)
  * @classification viewContainer
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
  * @example_react
  * ```tsx
  * class App extends Component {

package/types/SwiperItem.d.ts

@@ -2,7 +2,7 @@ import { ComponentType } from 'react'
 import { StandardProps } from './common'
 interface SwiperItemProps extends StandardProps {
   /** 该 swiper-item 的标识符
-   * @supported weapp, swan, tt, jd, h5, rn, harmony
+   * @supported weapp, swan, tt, jd, h5, rn, harmony, harmony_hybrid
    */
   itemId?: string
   /** 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
@@ -19,7 +19,7 @@ interface SwiperItemProps extends StandardProps {
 /** 仅可放置在 swiper 组件中，宽高自动设置为100%
  * > 不要为 `SwiperItem` 设置 **style** 属性，可以通过 class 设置样式。[7147](https://github.com/NervJS/taro/issues/7147)
  * @classification viewContainer
- * @supported weapp, alipay, swan, tt, jd, h5, rn, harmony
+ * @supported weapp, alipay, swan, tt, jd, h5, rn, harmony, harmony_hybrid
  * @example_react
  * ```tsx
  * class App extends Component {

package/types/Switch.d.ts

@@ -3,26 +3,31 @@ import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 interface SwitchProps extends StandardProps, FormItemProps {
   /** 是否选中
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   checked?: boolean
+  /** 设置在 React 非受控状态下，当前是否选中
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
+   * @unique
+   */
+  defaultChecked?: boolean
   /** 是否禁用
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony, harmony_hybrid
    */
   disabled?: boolean
   /** 样式，有效值：switch, checkbox
    * @default "switch"
-   * @supported weapp, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   type?: 'switch' | 'checkbox'
   /** switch 的颜色，同 css 的 color
    * @default "#04BE02"
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   color?: string
   /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
-   * @supported h5
+   * @supported h5, harmony_hybrid
    */
   nativeProps?: Record<string, unknown>
   /** 组件名字，用于表单提交获取数据。
@@ -39,7 +44,7 @@ interface SwitchProps extends StandardProps, FormItemProps {
    */
   ariaLabel?: string
   /** checked 改变时触发 change 事件
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   onChange?: CommonEventFunction<SwitchProps.onChangeEventDetail>
 }
@@ -84,7 +89,7 @@ declare namespace SwitchProps {
  *   </view>
  * </template>
  * ```
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
  */
 declare const Switch: ComponentType<SwitchProps>

package/types/Text.d.ts

@@ -3,16 +3,16 @@ import { StandardProps } from './common'
 interface TextProps extends StandardProps {
   /** 文本是否可选
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   selectable?: boolean
   /** 文本是否可选，该属性会使文本节点显示为 inline-block
    * @default false
-   * @supported weapp, h5
+   * @supported weapp, h5, harmony_hybrid
    */
   userSelect?: boolean
   /** 显示连续空格
-   * @supported weapp, alipay, swan, tt, qq, jd, h5
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
    */
   space?: keyof TextProps.TSpace
   /** 是否解码
@@ -25,6 +25,12 @@ interface TextProps extends StandardProps {
    * @supported alipay
    */
   numberOfLines?: number
+  /**
+   * 文本溢出处理
+   * @supported weapp-skyline
+   * @default 'visible'
+   */
+  overflow?: keyof TextProps.Overflow
   /** 限制文本最大行数
    * @supported weapp, harmony
    */
@@ -40,10 +46,20 @@ declare namespace TextProps {
     /** 根据字体设置的空格大小 */
     nbsp
   }
+  interface Overflow {
+    /** 修剪文本 */
+    clip
+    /** 淡出 */
+    fade
+    /** 显示省略号 */
+    ellipsis
+    /** 文本不截断 */
+    visible
+  }
 }
 /** 文本
  * @classification base
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
  * @example_react
  * ```tsx
  * export default class PageView extends Component {

package/types/Textarea.d.ts

@@ -2,11 +2,16 @@ import { ComponentType } from 'react'
 import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 interface TextareaProps extends StandardProps, FormItemProps {
   /** 输入框的内容
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   value?: string
+  /** 设置 React 非受控输入框的初始内容
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
+   * @unique
+   */
+  defaultValue?: string
   /** 输入框为空时占位符
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   placeholder?: string
   /** 指定 placeholder 的样式
@@ -20,27 +25,27 @@ interface TextareaProps extends StandardProps, FormItemProps {
   placeholderClass?: string
   /** 是否禁用
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   disabled?: boolean
   /** 最大输入长度，设置为 -1 的时候不限制最大长度
    * @default 140
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   maxlength?: number
   /** 自动聚焦，拉起键盘
    * @default false
-   * @supported weapp, swan, qq, jd, h5
+   * @supported weapp, swan, qq, jd, h5, harmony_hybrid
    */
   autoFocus?: boolean
   /** 获取焦点
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   focus?: boolean
   /** 是否自动增高，设置 autoHeight 时，style.height不生效
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   autoHeight?: boolean
   /** 如果 Textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true
@@ -89,7 +94,7 @@ interface TextareaProps extends StandardProps, FormItemProps {
    */
   disableDefaultPadding?: boolean
   /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
-   * @supported h5
+   * @supported h5, harmony_hybrid
    */
   nativeProps?: Record<string, unknown>
   /** 设置键盘右下角按钮的文字
@@ -124,11 +129,11 @@ interface TextareaProps extends StandardProps, FormItemProps {
    */
   adjustKeyboardTo?: boolean
   /** 输入框聚焦时触发
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   onFocus?: CommonEventFunction<TextareaProps.onFocusEventDetail>
   /** 输入框失去焦点时触发
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   onBlur?: CommonEventFunction<TextareaProps.onBlurEventDetail>
   /** 输入框行数变化时调用
@@ -138,11 +143,11 @@ interface TextareaProps extends StandardProps, FormItemProps {
   /** 当键盘输入时，触发 input 事件
    *
    * **onInput 处理函数的返回值并不会反映到 textarea 上**
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
   onInput?: CommonEventFunction<TextareaProps.onInputEventDetail>
   /** 点击完成时， 触发 confirm 事件
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   onConfirm?: CommonEventFunction<TextareaProps.onConfirmEventDetail>
   /** 键盘高度发生变化的时候触发此事件
@@ -189,7 +194,7 @@ declare namespace TextareaProps {
 }
 /** 多行输入框。该组件是原生组件，使用时请注意相关限制
  * @classification forms
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
  * @example_react
  * ```tsx
  * export default class PageView extends Component {