From c8e5089bcbaf48ae9b2591f2de5f362a6d167d31 Mon Sep 17 00:00:00 2001 From: ljje Date: Mon, 28 Oct 2024 14:53:44 +0800 Subject: [PATCH 01/53] docs: [Issues: #IB07UG] NativeBase.md --- en/NativeBase.md | 1133 +++++++++++++++++++++++----------------------- 1 file changed, 565 insertions(+), 568 deletions(-) diff --git a/en/NativeBase.md b/en/NativeBase.md index 663a9e35..e4985cde 100644 --- a/en/NativeBase.md +++ b/en/NativeBase.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

NativeBase

@@ -12,37 +12,33 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/NativeBase) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/NativeBase) -## 安装与使用 +## Installation and Usage +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-tpl/react-native-oh-tpl-native-base Releases](https://github.com/react-native-oh-library/NativeBase/releases). - -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/native-base Releases](https://github.com/react-native-oh-library/NativeBase/releases)，并下载适用版本的 tgz 包。 - - -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: #### **npm** ```bash -npm install @react-native-oh-tpl/native-base@file:# +npm install @react-native-oh-tpl/react-native-oh-tpl-native-base@file:# ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/native-base@file:# +yarn add @react-native-oh-tpl/react-native-oh-tpl-native-base@file:# ``` -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: ```tsx -// NativeBaseProvider 是一个使主题可在整个应用中使用的组件。它使用 React 的 Context API。将 NativeBaseProvider 添加到应用的根目录并更新 App.js,要按如下所示使用. import React from "react"; import { SafeAreaView, View } from "react-native"; import { NativeBaseProvider } from "native-base"; @@ -91,694 +87,695 @@ const styles = StyleSheet.create({ }, }); ``` + ## Link -本库依赖以下三方库，请查看对应文档： -+ [@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md) -+ [@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md) -+ [@react-native-oh-library/react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md) -+ [@react-native-oh-tpl/react-native-svg](/zh-cn/react-native-svg.md) -+ [@react-native-oh-tpl/react-navigation-drawer](/zh-cn/react-navigation-drawer.md) -+ [@react-native-oh-tpl/react-native-tab-view](/zh-cn/react-native-tab-view.md) -+ [@react-native-oh-tpl/react-native-vector-icons](/zh-cn/react-native-vector-icons.md) -+ [@react-native-oh-tpl/react-native-pager-view](/zh-cn/react-native-pager-view.md) -+ [@react-native-oh-tpl/react-native-swipe-list-view](/zh-cn/react-native-swipe-list-view.md) +本库依赖以下三方库，请查看对应文档: -本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-gesture-handler、@react-native-oh-tpl/react-native-reanimated、@react-native-oh-library/react-native-safe-area-context、@react-native-oh-tpl/react-native-svg、@react-native-oh-tpl/react-navigation-drawer、@react-native-oh-tpl/react-native-tab-view、@react-native-oh-tpl/react-native-vector-icons、@react-native-oh-tpl/react-native-pager-view的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +- [@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md) +- [@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md) +- [@react-native-oh-library/react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md) +- [@react-native-oh-tpl/react-native-svg](/zh-cn/react-native-svg.md) +- [@react-native-oh-tpl/react-navigation-drawer](/zh-cn/react-navigation-drawer.md) +- [@react-native-oh-tpl/react-native-tab-view](/zh-cn/react-native-tab-view.md) +- [@react-native-oh-tpl/react-native-vector-icons](/zh-cn/react-native-vector-icons.md) +- [@react-native-oh-tpl/react-native-pager-view](/zh-cn/react-native-pager-view.md) +- [@react-native-oh-tpl/react-native-swipe-list-view](/zh-cn/react-native-swipe-list-view.md) -如未引入请参照[@react-native-oh-tpl/react-native-gesture-handler 文档的 Link 章节](/zh-cn/react-native-gesture-handler.md#link)、[@react-native-oh-tpl/react-native-reanimated 文档的 Link 章节](/zh-cn/react-native-reanimated.md#link)、[@react-native-oh-library/react-native-safe-area-context 文档的 Link 章节](/zh-cn/react-native-safe-area-context.md#link)、[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](/zh-cn/react-native-svg.md#link)、[@react-native-oh-tpl/react-navigation-drawer 文档的 Link 章节](/zh-cn/react-navigation-drawer.md#link)、[@react-native-oh-tpl/react-native-tab-view 文档的 Link 章节](/zh-cn/react-native-tab-view.md#link)、[@react-native-oh-tpl/react-native-vector-icons 文档的 Link 章节](/zh-cn/react-native-vector-icons.md#link)、[@react-native-oh-tpl/react-native-pager-view 文档的 Link 章节](/zh-cn/react-native-pager-view.md#link)进行引入 +The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-gesture-handler、@react-native-oh-tpl/react-native-reanimated、@react-native-oh-library/react-native-safe-area-context、@react-native-oh-tpl/react-native-svg、@react-native-oh-tpl/react-navigation-drawer、@react-native-oh-tpl/react-native-tab-view、@react-native-oh-tpl/react-native-vector-icons、@react-native-oh-tpl/react-native-pager-view. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. -## 约束与限制 +If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md#link)、[@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md#link)、[@react-native-oh-library/react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md#link)、[@react-native-oh-tpl/react-native-svg](/zh-cn/react-native-svg.md#link)、[@react-native-oh-tpl/react-navigation-drawer](/zh-cn/react-navigation-drawer.md#link)、[@react-native-oh-tpl/react-native-tab-view](/zh-cn/react-native-tab-view.md#link)、[@react-native-oh-tpl/react-native-vector-icons](/zh-cn/react-native-vector-icons.md#link)、[@react-native-oh-tpl/react-native-pager-view](/zh-cn/react-native-pager-view.md#link) to add it to your project. -### 兼容性 +## Constraints -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +### Compatibility -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-oh-tpl-native-base Releases](https://github.com/react-native-oh-library/NativeBase/releases) +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-oh-tpl-native-base Releases](https://github.com/react-native-oh-library/NativeBase/releases) -## 组件 +## Components -组件使用详情见 [NativeBase 的文档介绍](https://docs.nativebase.io) +For details, see [NativeBase docs](https://docs.nativebase.io) -以下为目前已支持的组件属性： +以下为目前已支持的组件属性: -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 Yes 表示 HarmonyOS 平台支持该属性；No 则表示不支持；Web 表示仅Web支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!tip] "HarmonyOS Support"列为 Yes 表示 HarmonyOS 平台支持该属性；No 则表示不支持；Web 表示仅 Web 支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 **AspectRatio**: AspectRatio 控制节点或子组件未定义维度的大小 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| ratio | 容器的纵横比。例如 `16/9`、`16/10`、`9/16`、`4/3` | Object | No | All | Yes | +| ratio | 容器的纵横比。例如 `16/9`、`16/10`、`9/16`、`4/3` | Object | No | All | Yes | -**Box**: 这是一个满足低级布局需求的通用组件。它类似于div在HTML中。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +**Box**: 这是一个满足低级布局需求的通用组件。它类似于 div 在 HTML 中。 +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| children | 将组件渲染为 Box 子项。接受 React.Element 或 JSX.Element 数组。 | React.element | No | All | Yes | -| _text | 用于为 Box 内的文本提供参数 | Any | No | All | Yes | -| bg | 简写设置背景 | String | No | All | Yes | -| background | 可以接受各种背景相关的设置，如颜色、图像、渐变等 | String | No | All | Yes | -| bgColor | 明确用于设置背景颜色 | String | No | All | Yes | -| backgroundColor | 与bgColor类似，专门用于设置背景颜色 | String | No | All | Yes | +| children | 将组件渲染为 Box 子项。接受 React.Element 或 JSX.Element 数组。 | React.element | No | All | Yes | +| \_text | 用于为 Box 内的文本提供参数 | Any | No | All | Yes | +| bg | 简写设置背景 | String | No | All | Yes | +| background | 可以接受各种背景相关的设置，如颜色、图像、渐变等 | String | No | All | Yes | +| bgColor | 明确用于设置背景颜色 | String | No | All | Yes | +| backgroundColor | 与 bgColor 类似，专门用于设置背景颜色 | String | No | All | Yes | **Center**: 布局组件中心对齐 -[继承了React Native中View参数](https://reactnative.dev/docs/view#props) +[继承了 React Native 中 View 参数](https://reactnative.dev/docs/view#props) **Container**: 容器根据当前断点限制内容的宽度，同时保持尺寸的流动性。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| centerContent | 它将根据子元素的内容宽度将其置于中心。 | boolean | No | All | Yes | +| centerContent | 它将根据子元素的内容宽度将其置于中心。 | boolean | No | All | Yes | **Flex**: 布局组件，Flex 是 CSS flex 布局的一个封装 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| direction | 项目定位方向，值可以为 column,column-reverse,row,row-reverse | String | No | All | Yes | -| wrap | 子元素的换行方式nowrap,wrap,wrap-reverse | String | No | All | Yes | -| align | 子元素在交叉轴上的对齐方式，可选baseline,normal,stretch | String | No | All | Yes | -| justify | 子元素在主轴上的对齐方式，可选left,normal,right | String | No | All | Yes | -| basis | 可选-moz-fit-content,-moz-max-content,-moz-min-content,-webkit-auto,auto,content,fit-content,max-content,min-contents | String | No | All | Yes | -| grow | 可选Globals ,(number & {}) , (string & {}) | Number | No | All | Yes | -| shrink | 可选Globals , (number & {}) , (string & {}); | Number | No | All | Yes | +| direction | 项目定位方向，值可以为 column,column-reverse,row,row-reverse | String | No | All | Yes | +| wrap | 子元素的换行方式 nowrap,wrap,wrap-reverse | String | No | All | Yes | +| align | 子元素在交叉轴上的对齐方式，可选 baseline,normal,stretch | String | No | All | Yes | +| justify | 子元素在主轴上的对齐方式，可选 left,normal,right | String | No | All | Yes | +| basis | 可选-moz-fit-content,-moz-max-content,-moz-min-content,-webkit-auto,auto,content,fit-content,max-content,min-contents | String | No | All | Yes | +| grow | 可选 Globals ,(number & {}) , (string & {}) | Number | No | All | Yes | +| shrink | 可选 Globals , (number & {}) , (string & {}); | Number | No | All | Yes | **HStack / Row**: HStack / Row 布局组件水平对齐 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| direction | 堆叠项目的方向，可选row,column,column-reverse,row-reverse | String | No | All | Yes | +| direction | 堆叠项目的方向，可选 row,column,column-reverse,row-reverse | String | No | All | Yes | -**Stack**: 根据方向属性， Stack垂直或水平对齐项目 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +**Stack**: 根据方向属性， Stack 垂直或水平对齐项目 +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| divider | 元素之间使用的分隔元素。 | ReactElement | No | All | Yes | -| space | 每个堆栈项之间的空间。接受响应值 sm,2xs,xs,md,xl,lg,2xl,gutter,SpaceType | ReactElement | No | All | Yes | -| reversed | 确定是否反转堆叠项目的方向。 | Boolean | No | All | Yes | -| direction | 堆叠项目的方向,可选row，column，column-reverse，row-reverse | String | No | All | Yes | -| isHovered | 是否悬停 | Boolean | No | Web | No | -| isFocused | 是否聚焦 | Boolean | No | All | Yes | -| isDisabled | 是否禁用 | Boolean | No | All | Yes | -| isInvalid | 是否无效 | Boolean | No | All | Yes | -| isReadOnly | 是否只读,如果为 true，则阻止编辑子项的值。与 FormControls 一起使用 | Boolean | No | All | Yes | +| divider | 元素之间使用的分隔元素。 | ReactElement | No | All | Yes | +| space | 每个堆栈项之间的空间。接受响应值 sm,2xs,xs,md,xl,lg,2xl,gutter,SpaceType | ReactElement | No | All | Yes | +| reversed | 确定是否反转堆叠项目的方向。 | Boolean | No | All | Yes | +| direction | 堆叠项目的方向,可选 row，column，column-reverse，row-reverse | String | No | All | Yes | +| isHovered | 是否悬停 | Boolean | No | Web | No | +| isFocused | 是否聚焦 | Boolean | No | All | Yes | +| isDisabled | 是否禁用 | Boolean | No | All | Yes | +| isInvalid | 是否无效 | Boolean | No | All | Yes | +| isReadOnly | 是否只读,如果为 true，则阻止编辑子项的值。与 FormControls 一起使用 | Boolean | No | All | Yes | **VStack / Column**: VStack / Column 布局组件垂直对齐 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| direction | 堆叠项目的方向，可选row,column,column-reverse,row-reverse | String | No | All | Yes | +| direction | 堆叠项目的方向，可选 row,column,column-reverse,row-reverse | String | No | All | Yes | -**ZStack**: ZStack将元素与 z 轴对齐 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +**ZStack**: ZStack 将元素与 z 轴对齐 +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| reversed | 堆叠项目的方向，是否反转 | Boolean | No | All | Yes | +| reversed | 堆叠项目的方向，是否反转 | Boolean | No | All | Yes | **Button**: 按钮 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| variant | 风格，可选link，subtle，solid，ghost，outline，unstyled | String | No | All | Yes | -| colorScheme | 主题 | String | No | All | Yes | -| size | 按钮大小，可选sm（小尺寸）、md（中等尺寸）、lg（大尺寸） | String | No | All | Yes | -| isLoading | 是否加载中 | Boolean | No | All | Yes | -| isHovered | 是否悬停 | Boolean | No | Web | No | -| isPressed | 是否按下 | Boolean | No | All | Yes | -| isFocused | 是否被聚焦 | Boolean | No | All | Yes | -| isFocusVisible | 是否展示焦环 | Boolean | No | All | Yes | -| startIcon | 开始图标元素 | React.element | No | All | Yes | -| endIcon | 结束图标元素 | React.element | No | All | Yes | -| isLoadingText | 正在加载文本 | String | No | All | Yes | -| spinner | 是否加载中 | Boolean | No | All | Yes | -| isDisabled | 是否禁用 | Boolean | No | All | Yes | -| _text_ | 用于为框内的文本提供参数 | Object | No | All | Yes | -| _stack | 要传递给按钮内部使用的 HStack 的参数 | Object | No | All | Yes | -| _icon | 传递给按钮内部使用的图标的参数 | Object | No | All | Yes | -| spinnerPlacement | 指定加载指示器（spinner）的位置，可选start，end | String | No | All | Yes | -| _isLoading | 当按钮加载中时传递的参数 | Object | No | All | Yes | -| _isDisabled | 当按钮禁用时传递给按钮的参数 | Object | No | All | Yes | -| _spinner | 当按钮加载中时传递给按钮的参数 | Object | No | All | Yes | -| _hover | 当按钮悬停时传递给按钮的参数 | Object | No | Web | No | -| _pressed | 当按钮按下时传递给按钮的参数 | Object | No | All | Yes | -| _focus | 当按钮获得焦点时传递给按钮的参数 | Object | No | All | Yes | -| rightIcon | 按钮中使用的右侧图标元素 | React.element | No | All | Yes | -| leftIcon | 按钮中使用的左侧图标元素 | React.element | No | All | Yes | -| direction | 堆叠项目的方向，可选row,column | String | No | All | Yes | -| children | 将组件渲染为 Box 子项。接受 JSX.Element 或 JSX.Element 数组。 | React.element | No | All | Yes | -| isAttached | 如果为真，按钮将会连接在一起 | Boolean | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| variant | 风格，可选 link，subtle，solid，ghost，outline，unstyled | String | No | All | Yes | +| colorScheme | 主题 | String | No | All | Yes | +| size | 按钮大小，可选 sm（小尺寸）、md（中等尺寸）、lg（大尺寸） | String | No | All | Yes | +| isLoading | 是否加载中 | Boolean | No | All | Yes | +| isHovered | 是否悬停 | Boolean | No | Web | No | +| isPressed | 是否按下 | Boolean | No | All | Yes | +| isFocused | 是否被聚焦 | Boolean | No | All | Yes | +| isFocusVisible | 是否展示焦环 | Boolean | No | All | Yes | +| startIcon | 开始图标元素 | React.element | No | All | Yes | +| endIcon | 结束图标元素 | React.element | No | All | Yes | +| isLoadingText | 正在加载文本 | String | No | All | Yes | +| spinner | 是否加载中 | Boolean | No | All | Yes | +| isDisabled | 是否禁用 | Boolean | No | All | Yes | +| _text_ | 用于为框内的文本提供参数 | Object | No | All | Yes | +| \_stack | 要传递给按钮内部使用的 HStack 的参数 | Object | No | All | Yes | +| \_icon | 传递给按钮内部使用的图标的参数 | Object | No | All | Yes | +| spinnerPlacement | 指定加载指示器（spinner）的位置，可选 start，end | String | No | All | Yes | +| \_isLoading | 当按钮加载中时传递的参数 | Object | No | All | Yes | +| \_isDisabled | 当按钮禁用时传递给按钮的参数 | Object | No | All | Yes | +| \_spinner | 当按钮加载中时传递给按钮的参数 | Object | No | All | Yes | +| \_hover | 当按钮悬停时传递给按钮的参数 | Object | No | Web | No | +| \_pressed | 当按钮按下时传递给按钮的参数 | Object | No | All | Yes | +| \_focus | 当按钮获得焦点时传递给按钮的参数 | Object | No | All | Yes | +| rightIcon | 按钮中使用的右侧图标元素 | React.element | No | All | Yes | +| leftIcon | 按钮中使用的左侧图标元素 | React.element | No | All | Yes | +| direction | 堆叠项目的方向，可选 row,column | String | No | All | Yes | +| children | 将组件渲染为 Box 子项。接受 JSX.Element 或 JSX.Element 数组。 | React.element | No | All | Yes | +| isAttached | 如果为真，按钮将会连接在一起 | Boolean | No | All | Yes | **Pressable**: 创建可触摸交互的元素。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| onHoverIn | 鼠标移入调用 | () => void | No | Web | No | -| onHoverOut | 鼠标移出调用 | () => void | No | Web | No | -| onFocus | 聚焦时调用 | () => void | No | All | Yes | -| onBlur | 失焦时调用 | () => void | No | All | Yes | -| _hover | 悬停参数 | Object | No | Web | No | -| _pressed | 按下禁用时参数 | Object | No | All | Yes | -| _focus | 获得焦点时参数 | Object | No | All | Yes | -| _disabled | 禁用时参数 | Object | No | All | Yes | -| isDisabled | 是否禁用 | Boolean | No | All | Yes | -| isHovered | 是否悬停 | Boolean | No | Web | No | -| isPressed | 是否按下 | Boolean | No | All | Yes | -| isFocused | 是否聚焦 | Boolean | No | All | Yes | -| isFocusVisible | 是否展示焦环 | Boolean | No | All | Yes | -| _focusVisible | 焦点可见时应用的样式属性。这些样式仅在用户使用键盘与应用交互时应用。（仅限 Web） | Object | No | Web | No | -| children | 将组件渲染为 Box 子项。接受 JSX.Element 或 JSX.Element 数组。 | React.element | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| onHoverIn | 鼠标移入调用 | () => void | No | Web | No | +| onHoverOut | 鼠标移出调用 | () => void | No | Web | No | +| onFocus | 聚焦时调用 | () => void | No | All | Yes | +| onBlur | 失焦时调用 | () => void | No | All | Yes | +| \_hover | 悬停参数 | Object | No | Web | No | +| \_pressed | 按下禁用时参数 | Object | No | All | Yes | +| \_focus | 获得焦点时参数 | Object | No | All | Yes | +| \_disabled | 禁用时参数 | Object | No | All | Yes | +| isDisabled | 是否禁用 | Boolean | No | All | Yes | +| isHovered | 是否悬停 | Boolean | No | Web | No | +| isPressed | 是否按下 | Boolean | No | All | Yes | +| isFocused | 是否聚焦 | Boolean | No | All | Yes | +| isFocusVisible | 是否展示焦环 | Boolean | No | All | Yes | +| \_focusVisible | 焦点可见时应用的样式属性。这些样式仅在用户使用键盘与应用交互时应用。（仅限 Web） | Object | No | Web | No | +| children | 将组件渲染为 Box 子项。接受 JSX.Element 或 JSX.Element 数组。 | React.element | No | All | Yes | **CheckBox**: 复选框。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| id | 唯一标识 | String | No | All | Yes | -| value | 复选框的值 | String | No | All | Yes | -| defaultValue | 复选框组的初始值 | String | No | All | Yes | -| colorScheme | 主题，可选danger，info，orange，purple | String | No | All | Yes | -| size | 按钮大小，可选sm（小尺寸）、md（中等尺寸）、lg（大尺寸） | String | No | All | Yes | -| onChange | 选中事件 | () => void | No | All | Yes | -| _checkbox | 选中复选框时传递的参数 | Object | No | All | Yes | +| id | 唯一标识 | String | No | All | Yes | +| value | 复选框的值 | String | No | All | Yes | +| defaultValue | 复选框组的初始值 | String | No | All | Yes | +| colorScheme | 主题，可选 danger，info，orange，purple | String | No | All | Yes | +| size | 按钮大小，可选 sm（小尺寸）、md（中等尺寸）、lg（大尺寸） | String | No | All | Yes | +| onChange | 选中事件 | () => void | No | All | Yes | +| \_checkbox | 选中复选框时传递的参数 | Object | No | All | Yes | **FormControl**: 表单控件 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| nativeID | 本地ID | String | No | All | Yes | -| isInvalid | 是否无效 | Boolean | No | All | Yes | -| isRequired | 是否必须 | Boolean | No | All | Yes | -| isDisabled | 是否禁用 | Boolean | No | All | Yes | -| isReadOnly | 是否只读 | Boolean | No | All | Yes | -| _disabled | 禁用状态下传递参数 | Object | No | All | Yes | -| htmlFor | 反映“for”内容属性的值 | String | No | All | Yes | -| _astrick | 应用于 astric 文本的道具 | Object | No | All | Yes | -| rightIcon | 表单中使用的左侧侧图标元素 | React.element | No | All | Yes | -| leftIcon | 表单中使用的右侧图标元素 | React.element | No | All | Yes | -| startIcon | 开始图标元素 | React.element | No | All | Yes | -| endIcon | 结束图标元素 | React.element | No | All | Yes | -| _stack | 要传递给 FormControl.ErrorMessage 内部使用的 HStack 的参数 | Object | No | All | Yes | -| _invalid | 无效状态下传递参数 | Object | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| nativeID | 本地 ID | String | No | All | Yes | +| isInvalid | 是否无效 | Boolean | No | All | Yes | +| isRequired | 是否必须 | Boolean | No | All | Yes | +| isDisabled | 是否禁用 | Boolean | No | All | Yes | +| isReadOnly | 是否只读 | Boolean | No | All | Yes | +| \_disabled | 禁用状态下传递参数 | Object | No | All | Yes | +| htmlFor | 反映“for”内容属性的值 | String | No | All | Yes | +| \_astrick | 应用于 astric 文本的道具 | Object | No | All | Yes | +| rightIcon | 表单中使用的左侧侧图标元素 | React.element | No | All | Yes | +| leftIcon | 表单中使用的右侧图标元素 | React.element | No | All | Yes | +| startIcon | 开始图标元素 | React.element | No | All | Yes | +| endIcon | 结束图标元素 | React.element | No | All | Yes | +| \_stack | 要传递给 FormControl.ErrorMessage 内部使用的 HStack 的参数 | Object | No | All | Yes | +| \_invalid | 无效状态下传递参数 | Object | No | All | Yes | **IconButton**: 图标按钮 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| colorScheme | 主题，可选primary，green，red | String | No | All | Yes | -| variant | 风格，可选link，unstyled，solid，ghost，subtle | String | No | All | Yes | -| size | 按钮大小，可选sm（小尺寸）、md（中等尺寸）、lg（大尺寸） | String | No | All | Yes | -| isDisabled | 是否禁用 | Boolean | No | All | Yes | -| icon | 要使用的图标 | React.element | No | All | Yes | -| _icon | 要传递给IconButton内部使用的图标的参数 | Object | No | All | Yes | -| _hover | 要传递给IconButton内部使用的悬停的参数 | Object | No | Web | No | -| _pressed | 要传递给IconButton内部使用的按压的参数 | Object | No | All | Yes | -| _focus | 要传递给IconButton内部使用的聚焦的参数 | Object | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| colorScheme | 主题，可选 primary，green，red | String | No | All | Yes | +| variant | 风格，可选 link，unstyled，solid，ghost，subtle | String | No | All | Yes | +| size | 按钮大小，可选 sm（小尺寸）、md（中等尺寸）、lg（大尺寸） | String | No | All | Yes | +| isDisabled | 是否禁用 | Boolean | No | All | Yes | +| icon | 要使用的图标 | React.element | No | All | Yes | +| \_icon | 要传递给 IconButton 内部使用的图标的参数 | Object | No | All | Yes | +| \_hover | 要传递给 IconButton 内部使用的悬停的参数 | Object | No | Web | No | +| \_pressed | 要传递给 IconButton 内部使用的按压的参数 | Object | No | All | Yes | +| \_focus | 要传递给 IconButton 内部使用的聚焦的参数 | Object | No | All | Yes | **Input**: 输入框 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| isInvalid | 是否无效 | Boolean | No | All | Yes | -| variant | 风格，可选outline，filled，underlined，unstyled，rounded | String | No | All | Yes | -| isDisabled | 是否禁用 | Boolean | No | All | Yes | -| isHovered | 是否悬停 | Boolean | No | Web | No | -| isFocused | 是否聚焦 | Boolean | No | All | Yes | -| size | 输入框尺寸，可选sm（小尺寸）、md（中等尺寸）、lg（大尺寸） | String | No | All | Yes | -| isRequired | 是否必传 | Boolean | No | No | No | -| isReadOnly | 是否只读 | Boolean | No | All | Yes | -| InputLeftElement | 输入框内部左侧元素 | React.element | No | All | Yes | -| leftElement | 输入框外部左侧元素 | React.element | No | All | Yes | -| InputRightElement | 输入框内部右侧元素 | React.element | No | All | Yes | -| rightElement | 输入框外部右侧元素 | React.element | No | All | Yes | -| type | 类型，可选text，password | String | No | All | Yes | -| isFullWidth | 沾满元素 | Boolean | No | All | Yes | -| wrapperRef | 获取节点(鸿蒙中获取不到，用ref可以获取) | Any | No | No | No | -| _hover | 要传递给Input内部使用的悬停的参数 | Object | No | Web | NO | -| _focus | 要传递给Input内部使用的聚焦的参数 | Object | No | All | Yes | -| _disabled | 要传递给Input内部使用的禁用的参数 | Object | No | All | Yes | -| _readOnly | 要传递给Input内部使用的只读的参数 | Object | No | All | Yes | -| _invalid | 无效状态下传递参数 | Object | No | All | Yes | -| _input | 传递给InputBase组件参数 | Object | No | All | Yes | -| _stack | 要传递给按钮内部使用的 HStack 的参数 | Object | No | All | Yes | -| focusOutlineColor | 当输入框获得焦点时，该属性指定输入框的轮廓颜色 | Boolean | No | All | Yes | -| invalidOutlineColor | 当输入框中的内容被认为是无效时，该属性指定输入框的轮廓颜色 | Boolean | No | All | Yes | -| ref | 节点 | Any | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| isInvalid | 是否无效 | Boolean | No | All | Yes | +| variant | 风格，可选 outline，filled，underlined，unstyled，rounded | String | No | All | Yes | +| isDisabled | 是否禁用 | Boolean | No | All | Yes | +| isHovered | 是否悬停 | Boolean | No | Web | No | +| isFocused | 是否聚焦 | Boolean | No | All | Yes | +| size | 输入框尺寸，可选 sm（小尺寸）、md（中等尺寸）、lg（大尺寸） | String | No | All | Yes | +| isRequired | 是否必传 | Boolean | No | No | No | +| isReadOnly | 是否只读 | Boolean | No | All | Yes | +| InputLeftElement | 输入框内部左侧元素 | React.element | No | All | Yes | +| leftElement | 输入框外部左侧元素 | React.element | No | All | Yes | +| InputRightElement | 输入框内部右侧元素 | React.element | No | All | Yes | +| rightElement | 输入框外部右侧元素 | React.element | No | All | Yes | +| type | 类型，可选 text，password | String | No | All | Yes | +| isFullWidth | 沾满元素 | Boolean | No | All | Yes | +| wrapperRef | 获取节点(鸿蒙中获取不到，用 ref 可以获取) | Any | No | No | No | +| \_hover | 要传递给 Input 内部使用的悬停的参数 | Object | No | Web | NO | +| \_focus | 要传递给 Input 内部使用的聚焦的参数 | Object | No | All | Yes | +| \_disabled | 要传递给 Input 内部使用的禁用的参数 | Object | No | All | Yes | +| \_readOnly | 要传递给 Input 内部使用的只读的参数 | Object | No | All | Yes | +| \_invalid | 无效状态下传递参数 | Object | No | All | Yes | +| \_input | 传递给 InputBase 组件参数 | Object | No | All | Yes | +| \_stack | 要传递给按钮内部使用的 HStack 的参数 | Object | No | All | Yes | +| focusOutlineColor | 当输入框获得焦点时，该属性指定输入框的轮廓颜色 | Boolean | No | All | Yes | +| invalidOutlineColor | 当输入框中的内容被认为是无效时，该属性指定输入框的轮廓颜色 | Boolean | No | All | Yes | +| ref | 节点 | Any | No | All | Yes | **TextArea**: 文本域 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| isInvalid | 是否无效 | Boolean | No | All | Yes | -| variant | 风格，可选outline，filled，underlined，unstyled，rounded | String | No | All | Yes | -| isDisabled | 是否禁用 | Boolean | No | All | Yes | -| isHovered | 是否悬停 | Boolean | No | Web | No | -| isFocused | 是否聚焦 | Boolean | No | All | Yes | -| size | 输入框尺寸，可选sm（小尺寸）、md（中等尺寸）、lg（大尺寸） | String | No | All | Yes | -| isRequired | 是否必传 | Boolean | No | No | No | -| isReadOnly | 是否只读 | Boolean | No | All | Yes | -| InputLeftElement | 输入框内部左侧元素 | React.element | No | All | Yes | -| leftElement | 输入框外部左侧元素 | React.element | No | All | Yes | -| InputRightElement | 输入框内部右侧元素 | React.element | No | All | Yes | -| rightElement | 输入框外部右侧元素 | React.element | No | All | Yes | -| type | 类型，可选text，password | String | No | All | Yes | -| isFullWidth | 沾满元素 | Boolean | No | All | Yes | -| wrapperRef | 获取节点(鸿蒙中获取不到，用ref可以获取) | Any | No | No | No | -| _hover | 要传递给Input内部使用的悬停的参数 | Object | No | Web | NO | -| _focus | 要传递给Input内部使用的聚焦的参数 | Object | No | All | Yes | -| _disabled | 要传递给Input内部使用的禁用的参数 | Object | No | All | Yes | -| _readOnly | 要传递给Input内部使用的只读的参数 | Object | No | All | Yes | -| _invalid | 无效状态下传递参数 | Object | No | All | Yes | -| _input | 传递给InputBase组件参数 | Object | No | All | Yes | -| _stack | 要传递给按钮内部使用的 HStack 的参数 | Object | No | All | Yes | -| focusOutlineColor | 当输入框获得焦点时，该属性指定输入框的轮廓颜色 | Boolean | No | All | Yes | -| invalidOutlineColor | 当输入框中的内容被认为是无效时，该属性指定输入框的轮廓颜色 | Boolean | No | All | Yes | -| ref | 节点 | Any | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| isInvalid | 是否无效 | Boolean | No | All | Yes | +| variant | 风格，可选 outline，filled，underlined，unstyled，rounded | String | No | All | Yes | +| isDisabled | 是否禁用 | Boolean | No | All | Yes | +| isHovered | 是否悬停 | Boolean | No | Web | No | +| isFocused | 是否聚焦 | Boolean | No | All | Yes | +| size | 输入框尺寸，可选 sm（小尺寸）、md（中等尺寸）、lg（大尺寸） | String | No | All | Yes | +| isRequired | 是否必传 | Boolean | No | No | No | +| isReadOnly | 是否只读 | Boolean | No | All | Yes | +| InputLeftElement | 输入框内部左侧元素 | React.element | No | All | Yes | +| leftElement | 输入框外部左侧元素 | React.element | No | All | Yes | +| InputRightElement | 输入框内部右侧元素 | React.element | No | All | Yes | +| rightElement | 输入框外部右侧元素 | React.element | No | All | Yes | +| type | 类型，可选 text，password | String | No | All | Yes | +| isFullWidth | 沾满元素 | Boolean | No | All | Yes | +| wrapperRef | 获取节点(鸿蒙中获取不到，用 ref 可以获取) | Any | No | No | No | +| \_hover | 要传递给 Input 内部使用的悬停的参数 | Object | No | Web | NO | +| \_focus | 要传递给 Input 内部使用的聚焦的参数 | Object | No | All | Yes | +| \_disabled | 要传递给 Input 内部使用的禁用的参数 | Object | No | All | Yes | +| \_readOnly | 要传递给 Input 内部使用的只读的参数 | Object | No | All | Yes | +| \_invalid | 无效状态下传递参数 | Object | No | All | Yes | +| \_input | 传递给 InputBase 组件参数 | Object | No | All | Yes | +| \_stack | 要传递给按钮内部使用的 HStack 的参数 | Object | No | All | Yes | +| focusOutlineColor | 当输入框获得焦点时，该属性指定输入框的轮廓颜色 | Boolean | No | All | Yes | +| invalidOutlineColor | 当输入框中的内容被认为是无效时，该属性指定输入框的轮廓颜色 | Boolean | No | All | Yes | +| ref | 节点 | Any | No | All | Yes | **Link**: 超链接 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| href | 连接地址 | String | No | All | Yes | -| size | 超连接尺寸2xl，xl，lg，md，sm，xsm | String | No | All | Yes | -| isUnderlined | 是否有下横线 | Boolean | No | All | Yes | -| isHovered | 是否悬停 | Boolean | No | Web | No | -| onPress | 按压事件 | () => void | No | All | Yes | -| isExternal | 是否直接打开web端 | String | No | All | Yes | -| _hover | 悬停参数 | Object | No | Web | No | -| wrapperRef | 获取节点(鸿蒙中获取不到，用ref可以获取) | Any | No | No | No | +| href | 连接地址 | String | No | All | Yes | +| size | 超连接尺寸 2xl，xl，lg，md，sm，xsm | String | No | All | Yes | +| isUnderlined | 是否有下横线 | Boolean | No | All | Yes | +| isHovered | 是否悬停 | Boolean | No | Web | No | +| onPress | 按压事件 | () => void | No | All | Yes | +| isExternal | 是否直接打开 web 端 | String | No | All | Yes | +| \_hover | 悬停参数 | Object | No | Web | No | +| wrapperRef | 获取节点(鸿蒙中获取不到，用 ref 可以获取) | Any | No | No | No | **Radio**: 单选框 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| value | 单选框的值 | String | No | All | Yes | -| colorScheme | 主题，可选yellow，green，red | String | No | All | Yes | -| isDisabled | 是否禁用 | Boolean | No | All | Yes | -| isHovered | 是否悬停 | Boolean | No | Web | No | -| isPressed | 是否按压 | Boolean | No | All | Yes | -| isFocused | 是否聚焦 | Boolean | No | All | Yes | -| isFocusVisible | 焦点是否可见 | Boolean | No | All | Yes | -| size | 单选框尺寸lg，md，sm | String | No | All | Yes | -| icon | 接收图标 | React.element | No | All | Yes | -| wrapperRef | 获取节点(鸿蒙中获取不到，用ref可以获取) | Any | No | No | No | -| _stack | 要传递给单选框内部使用的 HStack 的参数 | Object | No | All | Yes | -| _disabled | 当禁用时传递给单选框的参数 | Object | No | All | Yes | -| _checked | 当选中时传递给单选框的参数 | Object | No | All | Yes | -| _focus | 当聚焦时传递给单选框的参数 | Object | No | All | Yes | -| _hover | 当悬停时传递给单选框的参数 | Object | No | Web | No | -| _invalid | 当失效时传递给单选框的参数 | Object | No | All | Yes | -| _pressed | 当按压时传递给单选框的参数 | Object | No | All | Yes | -| _icon | 当传递图标时传递给单选框的参数 | Object | No | All | Yes | -| _readOnly | 当只读时传递给单选框的参数 | Object | No | All | Yes | -| _interactionBox | 当交互时传递给按钮的参数 | Object | No | All | Yes | -| ref | 获取节点数据 | Object | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| value | 单选框的值 | String | No | All | Yes | +| colorScheme | 主题，可选 yellow，green，red | String | No | All | Yes | +| isDisabled | 是否禁用 | Boolean | No | All | Yes | +| isHovered | 是否悬停 | Boolean | No | Web | No | +| isPressed | 是否按压 | Boolean | No | All | Yes | +| isFocused | 是否聚焦 | Boolean | No | All | Yes | +| isFocusVisible | 焦点是否可见 | Boolean | No | All | Yes | +| size | 单选框尺寸 lg，md，sm | String | No | All | Yes | +| icon | 接收图标 | React.element | No | All | Yes | +| wrapperRef | 获取节点(鸿蒙中获取不到，用 ref 可以获取) | Any | No | No | No | +| \_stack | 要传递给单选框内部使用的 HStack 的参数 | Object | No | All | Yes | +| \_disabled | 当禁用时传递给单选框的参数 | Object | No | All | Yes | +| \_checked | 当选中时传递给单选框的参数 | Object | No | All | Yes | +| \_focus | 当聚焦时传递给单选框的参数 | Object | No | All | Yes | +| \_hover | 当悬停时传递给单选框的参数 | Object | No | Web | No | +| \_invalid | 当失效时传递给单选框的参数 | Object | No | All | Yes | +| \_pressed | 当按压时传递给单选框的参数 | Object | No | All | Yes | +| \_icon | 当传递图标时传递给单选框的参数 | Object | No | All | Yes | +| \_readOnly | 当只读时传递给单选框的参数 | Object | No | All | Yes | +| \_interactionBox | 当交互时传递给按钮的参数 | Object | No | All | Yes | +| ref | 获取节点数据 | Object | No | All | Yes | **Select**: 下拉框 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| placeholder | 提示文本 | String | No | All | Yes | -| color | 选中颜色 | String | No | All | Yes | -| placeholderTextColor | 提示文本颜色 | String | No | All | Yes | -| _item | 是否悬停 | Boolean | No | No | No | -| _selectedItem | 是否按压 | Boolean | No | All | Yes | -| selectedValue | 选中值 | Boolean | No | All | Yes | -| defaultValue | 初始值 | Boolean | No | All | Yes | -| onValueChange | 单选事件 | () => void | No | All | Yes | -| isDisabled | 是否禁用 | React.element | No | All | Yes | -| isHovered | 是否悬停 | Any | No | Web | No | -| isFocused | 是否聚焦 | Object | No | All | Yes | -| isFocusVisible | 焦点是否可见 | Object | No | All | Yes | -| dropdownIcon | 原有图标 | React.element | No | All | Yes | -| dropdownOpenIcon | 打开图标 | React.element | No | All | Yes | -| dropdownCloseIcon | 关闭图标 | React.element | No | All | Yes | -| variant | 风格，可选outline，filled，underlined，unstyled，rounded | String | No | All | Yes | -| onOpen | 打开下拉事件 | () => void | No | All | Yes | -| onClose | 关闭下拉事件 | () => void | No | All | Yes | -| _actionSheet | 传递给遮罩层的参数样式 | Object | No | All | Yes | -| _actionSheetContent | 传递给内容的参数样式 | Object | No | All | Yes | -| _actionSheetBody | 传递给内容Body的参数 | Object | No | All | Yes | -| wrapperRef | 获取节点 | Any | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| placeholder | 提示文本 | String | No | All | Yes | +| color | 选中颜色 | String | No | All | Yes | +| placeholderTextColor | 提示文本颜色 | String | No | All | Yes | +| \_item | 是否悬停 | Boolean | No | No | No | +| \_selectedItem | 是否按压 | Boolean | No | All | Yes | +| selectedValue | 选中值 | Boolean | No | All | Yes | +| defaultValue | 初始值 | Boolean | No | All | Yes | +| onValueChange | 单选事件 | () => void | No | All | Yes | +| isDisabled | 是否禁用 | React.element | No | All | Yes | +| isHovered | 是否悬停 | Any | No | Web | No | +| isFocused | 是否聚焦 | Object | No | All | Yes | +| isFocusVisible | 焦点是否可见 | Object | No | All | Yes | +| dropdownIcon | 原有图标 | React.element | No | All | Yes | +| dropdownOpenIcon | 打开图标 | React.element | No | All | Yes | +| dropdownCloseIcon | 关闭图标 | React.element | No | All | Yes | +| variant | 风格，可选 outline，filled，underlined，unstyled，rounded | String | No | All | Yes | +| onOpen | 打开下拉事件 | () => void | No | All | Yes | +| onClose | 关闭下拉事件 | () => void | No | All | Yes | +| \_actionSheet | 传递给遮罩层的参数样式 | Object | No | All | Yes | +| \_actionSheetContent | 传递给内容的参数样式 | Object | No | All | Yes | +| \_actionSheetBody | 传递给内容 Body 的参数 | Object | No | All | Yes | +| wrapperRef | 获取节点 | Any | No | All | Yes | **Select.Item**: 下拉框子集 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| label | 选择提示文本 | String | No | All | Yes | -| value | 选中值 | String | No | All | Yes | +| label | 选择提示文本 | String | No | All | Yes | +| value | 选中值 | String | No | All | Yes | **Switch**: 开关 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| size | 开关尺寸，可选lg，md，sm | String | No | All | Yes | -| isDisabled | 是否禁用 | Boolean | No | All | Yes | -| isHovered | 是否悬停 | Boolean | No | Web | No | -| name | 表单中使用开关的别名 | String | No | All | Yes | -| onToggle | 开关事件 | () => void | No | All | Yes | -| isChecked | 是否开启 | Boolean | No | All | Yes | -| defaultIsChecked | 是否默认开启 | Boolean | No | All | Yes | -| isInvalid | 是否失效 | Boolean | No | All | Yes | -| onTrackColor | 打开时轨道的颜色 | Object | No | All | Yes | -| offTrackColor | 关闭时轨道的颜色 | Object | No | All | Yes | -| onThumbColor | 打开时按钮的颜色 | Object | No | All | Yes | -| offThumbColor | 关闭时按钮的颜色 | Object | No | All | Yes | -| colorScheme | 主题 | String | No | All | Yes | -| _hover | 悬停参数 | String | No | Web | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| size | 开关尺寸，可选 lg，md，sm | String | No | All | Yes | +| isDisabled | 是否禁用 | Boolean | No | All | Yes | +| isHovered | 是否悬停 | Boolean | No | Web | No | +| name | 表单中使用开关的别名 | String | No | All | Yes | +| onToggle | 开关事件 | () => void | No | All | Yes | +| isChecked | 是否开启 | Boolean | No | All | Yes | +| defaultIsChecked | 是否默认开启 | Boolean | No | All | Yes | +| isInvalid | 是否失效 | Boolean | No | All | Yes | +| onTrackColor | 打开时轨道的颜色 | Object | No | All | Yes | +| offTrackColor | 关闭时轨道的颜色 | Object | No | All | Yes | +| onThumbColor | 打开时按钮的颜色 | Object | No | All | Yes | +| offThumbColor | 关闭时按钮的颜色 | Object | No | All | Yes | +| colorScheme | 主题 | String | No | All | Yes | +| \_hover | 悬停参数 | String | No | Web | No | **Slider**: 滑块 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| value | 值 | Number | No | All | Yes | -| defaultValue | 默认值 | Number | No | All | Yes | -| onChange | 滑块事件 | () => void | No | All | Yes | -| colorScheme | 主题 | String | No | All | Yes | -| orientation | 展示方向，可选horizontal，vertical' | String | No | All | Yes | -| accessibilityLabel | 滑块文本描述 | String | No | All | Yes | -| isReversed | 是否反转 | Boolean | No | All | Yes | -| isDisabled | 是否禁用 | Boolean | No | All | Yes | -| onChangeEnd | 松开停止移动事件 | () => void | No | All | Yes | -| minValue | 最小值 | Number | No | All | Yes | -| maxValue | 最大值 | Number | No | All | Yes | -| step | 每次用移动的步数 | Number | No | All | Yes | -| isReadOnly | 最大值 | Boolean | No | All | Yes | -| maxValue | 最大值 | Number | No | All | Yes | -| _disabled | 禁用时启用 | Number | No | All | Yes | -| _readOnly | 只读时启用 | Number | No | All | Yes | -| sliderTrackHeight | 轨道高度 | Number | No | All | Yes | -| thumbSize | 滑块大小 | Number | No | All | Yes | -| _interactionBox | 交互样式 | Object | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| value | 值 | Number | No | All | Yes | +| defaultValue | 默认值 | Number | No | All | Yes | +| onChange | 滑块事件 | () => void | No | All | Yes | +| colorScheme | 主题 | String | No | All | Yes | +| orientation | 展示方向，可选 horizontal，vertical' | String | No | All | Yes | +| accessibilityLabel | 滑块文本描述 | String | No | All | Yes | +| isReversed | 是否反转 | Boolean | No | All | Yes | +| isDisabled | 是否禁用 | Boolean | No | All | Yes | +| onChangeEnd | 松开停止移动事件 | () => void | No | All | Yes | +| minValue | 最小值 | Number | No | All | Yes | +| maxValue | 最大值 | Number | No | All | Yes | +| step | 每次用移动的步数 | Number | No | All | Yes | +| isReadOnly | 最大值 | Boolean | No | All | Yes | +| maxValue | 最大值 | Number | No | All | Yes | +| \_disabled | 禁用时启用 | Number | No | All | Yes | +| \_readOnly | 只读时启用 | Number | No | All | Yes | +| sliderTrackHeight | 轨道高度 | Number | No | All | Yes | +| thumbSize | 滑块大小 | Number | No | All | Yes | +| \_interactionBox | 交互样式 | Object | No | All | Yes | **Badge**: 小标识小标签 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| variant | 风格 | Number | No | All | Yes | -| colorScheme | 主题,可选success，danger，info，coolGray | String | No | All | Yes | -| rightIcon | 组件右侧图标 | React.element | No | All | Yes | -| leftIcon | 组件左侧图标 | React.element | No | All | Yes | -| startIcon | 开始图标 | React.element | No | All | Yes | -| endIcon | 结束图标 | React.element | No | All | Yes | -| _text | 组件内的文本提供参数 | Object | No | All | Yes | -| _icon | 组件内的图标提供参数 | Object | No | All | Yes | +| variant | 风格 | Number | No | All | Yes | +| colorScheme | 主题,可选 success，danger，info，coolGray | String | No | All | Yes | +| rightIcon | 组件右侧图标 | React.element | No | All | Yes | +| leftIcon | 组件左侧图标 | React.element | No | All | Yes | +| startIcon | 开始图标 | React.element | No | All | Yes | +| endIcon | 结束图标 | React.element | No | All | Yes | +| \_text | 组件内的文本提供参数 | Object | No | All | Yes | +| \_icon | 组件内的图标提供参数 | Object | No | All | Yes | **Divider**: 分割线 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| orientation | 方向,可选vertical，horizontal | Number | No | All | Yes | -| thickness | 分割线宽度 | String | No | All | Yes | +| orientation | 方向,可选 vertical，horizontal | Number | No | All | Yes | +| thickness | 分割线宽度 | String | No | All | Yes | **Alert**: 状态提示框 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| status | 方向,可选info，warning，success，error | String | No | All | Yes | -| variant | 风格 | String | No | All | Yes | -| colorScheme | 主题 | String | No | All | Yes | +| status | 方向,可选 info，warning，success，error | String | No | All | Yes | +| variant | 风格 | String | No | All | Yes | +| colorScheme | 主题 | String | No | All | Yes | **Progress**: 进度条 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| value | 数值 | Number | No | All | Yes | -| size | 尺寸 | String | No | All | Yes | -| colorScheme | 主题 | String | No | All | Yes | -| _filledTrack | 填充的轨道提供参数 | Object | No | All | Yes | -| min | 最小值 | Number | No | All | Yes | -| max | 最大值 | Number | No | All | Yes | - +| value | 数值 | Number | No | All | Yes | +| size | 尺寸 | String | No | All | Yes | +| colorScheme | 主题 | String | No | All | Yes | +| \_filledTrack | 填充的轨道提供参数 | Object | No | All | Yes | +| min | 最小值 | Number | No | All | Yes | +| max | 最大值 | Number | No | All | Yes | **Skeleton**: 组件的加载状态 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| fadeDuration | 加载时长 | Number | No | All | Yes | -| isLoaded | 是否加载中 | Boolean | No | All | Yes | -| speed | 加载速度 | Number | No | All | Yes | -| startColor | 开始颜色 | String | No | All | Yes | -| endColor | 结束颜色 | String | No | All | Yes | -| size | 尺寸 | String | No | All | Yes | +| fadeDuration | 加载时长 | Number | No | All | Yes | +| isLoaded | 是否加载中 | Boolean | No | All | Yes | +| speed | 加载速度 | Number | No | All | Yes | +| startColor | 开始颜色 | String | No | All | Yes | +| endColor | 结束颜色 | String | No | All | Yes | +| size | 尺寸 | String | No | All | Yes | **Skeleton.Text**: 组件的加载状态文字组件 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| fadeDuration | 加载时长 | Number | No | All | Yes | -| isLoaded | 是否加载中 | Boolean | No | All | Yes | -| speed | 加载速度 | Number | No | All | Yes | -| startColor | 开始颜色 | String | No | All | Yes | -| endColor | 结束颜色 | String | No | All | Yes | -| lines | 文本中的行数 | Number | No | All | Yes | -| _line | 文本中的行数样式参数 | String | No | All | Yes | -| _stack | 要传递给按钮内部使用的 HStack 的参数 | String | No | All | Yes | +| fadeDuration | 加载时长 | Number | No | All | Yes | +| isLoaded | 是否加载中 | Boolean | No | All | Yes | +| speed | 加载速度 | Number | No | All | Yes | +| startColor | 开始颜色 | String | No | All | Yes | +| endColor | 结束颜色 | String | No | All | Yes | +| lines | 文本中的行数 | Number | No | All | Yes | +| \_line | 文本中的行数样式参数 | String | No | All | Yes | +| \_stack | 尺寸 | String | No | All | Yes | **Spinner**: 加载等待中 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| color | 颜色 | String | No | All | Yes | -| size | 尺寸，可选lg，md，sm | String | No | All | Yes | +| color | 颜色 | String | No | All | Yes | +| size | 尺寸，可选 lg，md，sm | String | No | All | Yes | **Toast**: 轻提示 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| show | 消息体 | Object | No | All | Yes | -| close | 关闭单个 | (id: any) => void; | No | All | Yes | -| closeAll | 关闭所有 | () => void | No | All | Yes | -| isActive | 防抖设计 | (id: any) => boolean; | No | All | Yes | +| show | 消息体 | Object | No | All | Yes | +| close | 关闭单个 | (id: any) => void; | No | All | Yes | +| closeAll | 关闭所有 | () => void | No | All | Yes | +| isActive | 防抖设计 | (id: any) => boolean; | No | All | Yes | **Toast.show**: 轻提示消息体 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| title | 标题 | ReactNode | No | All | Yes | -| description | 内容描述 | ReactNode | No | All | Yes | -| duration | 显示时长 | Number 或 null | No | All | Yes | -| id | 唯一标识 | any | No | All | Yes | -| onCloseComplete | 显示完成关闭回调 | () => void | No | All | Yes | -| placement | 位置，可选top，top-right，top-left，bottom，bottom-left，bottom-right | String | No | All | Yes | -| render | 接收子组件 | (props: any) => ReactNode | No | All | Yes | -| _title | 标题样式参数 | () => void | No | All | Yes | -| _description | 描述样式参数 | () => void | No | All | Yes | -| accessibilityAnnouncement | Toast 打开时屏幕阅读器播报的文本 | String | No | Android | No | -| accessibilityLiveRegion | Toast 打开时屏幕阅读器播报的文本位置 | String | No | Android | No | -| avoidKeyboard | 键盘打开，则 Toast 将向上移动相当于键盘高度 | Boolean | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| title | 标题 | ReactNode | No | All | Yes | +| description | 内容描述 | ReactNode | No | All | Yes | +| duration | 显示时长 | Number 或 null | No | All | Yes | +| id | 唯一标识 | any | No | All | Yes | +| onCloseComplete | 显示完成关闭回调 | () => void | No | All | Yes | +| placement | 位置，可选 top，top-right，top-left，bottom，bottom-left，bottom-right | String | No | All | Yes | +| render | 接收子组件 | (props: any) => ReactNode | No | All | Yes | +| \_title | 标题样式参数 | () => void | No | All | Yes | +| \_description | 描述样式参数 | () => void | No | All | Yes | +| accessibilityAnnouncement | Toast 打开时屏幕阅读器播报的文本 | String | No | Android | No | +| accessibilityLiveRegion | Toast 打开时屏幕阅读器播报的文本位置 | String | No | Android | No | +| avoidKeyboard | 键盘打开，则 Toast 将向上移动相当于键盘高度 | Boolean | No | All | Yes | **Text**: 文本 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| children | 子集 | JSX.Element | No | All | Yes | -| fontSize | 字号 | String | No | All | Yes | -| letterSpacing | 间距 | String | No | All | Yes | -| lineHeight | 行高 | String | No | All | Yes | -| fontWeight | 字宽 | String | No | All | Yes | -| Fonts | 字型 | String | No | All | Yes | -| noOfLines | 行数 | Number | No | All | Yes | -| bold | 加粗 | Number | No | All | Yes | -| isTruncated | 超出省略 | Boolean | No | All | Yes | -| italic | 斜体 | Boolean | No | All | Yes | -| underline | 下横线 | Boolean | No | All | Yes | -| strikeThrough | 删除线 | Boolean | No | All | Yes | -| sub | 字体缩小（副标题或者辅助说明的文本） | Boolean | No | All | Yes | -| highlight | 突出显示 | Boolean | No | All | Yes | - -**Heading**: 标题(继承了Text属性) -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| size | 尺寸，可选lg，md，sm | String | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| children | 子集 | JSX.Element | No | All | Yes | +| fontSize | 字号 | String | No | All | Yes | +| letterSpacing | 间距 | String | No | All | Yes | +| lineHeight | 行高 | String | No | All | Yes | +| fontWeight | 字宽 | String | No | All | Yes | +| Fonts | 字型 | String | No | All | Yes | +| noOfLines | 行数 | Number | No | All | Yes | +| bold | 加粗 | Number | No | All | Yes | +| isTruncated | 超出省略 | Boolean | No | All | Yes | +| italic | 斜体 | Boolean | No | All | Yes | +| underline | 下横线 | Boolean | No | All | Yes | +| strikeThrough | 删除线 | Boolean | No | All | Yes | +| sub | 字体缩小（副标题或者辅助说明的文本） | Boolean | No | All | Yes | +| highlight | 突出显示 | Boolean | No | All | Yes | + +**Heading**: 标题(继承了 Text 属性) +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| size | 尺寸，可选 lg，md，sm | String | No | All | Yes | **AlertDialog**: 警告对话框 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| isOpen | 是否打开 | Boolean | No | All | Yes | -| onClose | 关闭事件 | () => void | No | All | Yes | -| defaultIsOpen | 是否打开 | Boolean | No | All | Yes | -| size | 尺寸 | Number | No | All | Yes | -| leastDestructiveRef | 最小元素节点 | Object | No | All | Yes | -| initialFocusRef | 打开时焦点元素节点 | Object | No | All | Yes | -| finalFocusRef | 关闭时焦点元素节点 | Boolean | No | All | Yes | -| avoidKeyboard | 键盘打开，则 AlertDialog 将向上移动相当于键盘高度 | Boolean | No | All | Yes | -| closeOnOverlayClick | 点击关闭 | Boolean | No | All | Yes | -| isKeyboardDismissable | Esc关闭 | Boolean | No | No | No | -| overlayVisible | 背景元素是否可见 | Boolean | No | All | Yes | -| backdropVisible | 背景元素是否可见 | Boolean | No | All | Yes | -| _backdrop | 遮罩参数用样式 | Any | No | All | Yes | -| _backdropFade | 遮罩动画的参数样式 | Object | No | All | Yes | -| _fade | 子集褪色动画的参数样式 | Object | No | All | Yes | -| _slide | 子集幻灯片动画的参数样式 | Object | No | All | Yes | -| animationPreset | 动画类型 | Object | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| isOpen | 是否打开 | Boolean | No | All | Yes | +| onClose | 关闭事件 | () => void | No | All | Yes | +| defaultIsOpen | 是否打开 | Boolean | No | All | Yes | +| size | 尺寸 | Number | No | All | Yes | +| leastDestructiveRef | 最小元素节点 | Object | No | All | Yes | +| initialFocusRef | 打开时焦点元素节点 | Object | No | All | Yes | +| finalFocusRef | 关闭时焦点元素节点 | Boolean | No | All | Yes | +| avoidKeyboard | 键盘打开，则 AlertDialog 将向上移动相当于键盘高度 | Boolean | No | All | Yes | +| closeOnOverlayClick | 点击找找关闭 | Boolean | No | All | Yes | +| isKeyboardDismissable | Esc 关闭 | Boolean | No | No | No | +| overlayVisible | 背景元素是否可见 | Boolean | No | All | Yes | +| backdropVisible | 背景元素是否可见 | Boolean | No | All | Yes | +| \_backdrop | 遮罩参数用样式 | Any | No | All | Yes | +| \_backdropFade | 遮罩动画的参数样式 | Object | No | All | Yes | +| \_fade | 子集褪色动画的参数样式 | Object | No | All | Yes | +| \_slide | 子集幻灯片动画的参数样式 | Object | No | All | Yes | +| animationPreset | 动画类型 | Object | No | All | Yes | **Menu**: 菜单 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| trigger | 手动触发显示的元素 | () => void | No | All | Yes | -| onOpen | 打开事件 | () => void | No | All | Yes | -| onClose | 关闭事件 | () => void | No | All | Yes | -| closeOnSelect | 选择时菜单是否自动关闭 | Boolean | No | All | Yes | -| defaultIsOpen | 默认打开 | Boolean | No | All | Yes | -| isOpen | 是否打开 | Boolean | No | All | Yes | -| crossOffset | 控制菜单相对于触发元素的偏移量 | Number | No | All | Yes | -| offset | 菜单弹出位置的偏移量 | Number | No | All | Yes | -| shouldOverlapWithTrigger | 控制菜单是否与触发元素重叠显示。 | boolean | No | All | Yes | -| placement | 位置，可选top,bottom,left,right等 | Boolean | No | All | Yes | -| _overlay | 菜单的覆盖层参数 | Boolean | No | All | Yes | -| _presenceTransition | 出现和消失过渡效果参数 | Boolean | No | All | Yes | -| _backdrop | 背景遮罩参数 | Boolean | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| trigger | 手动触发显示的元素 | () => void | No | All | Yes | +| onOpen | 打开事件 | () => void | No | All | Yes | +| onClose | 关闭事件 | () => void | No | All | Yes | +| closeOnSelect | 选择时菜单是否自动关闭 | Boolean | No | All | Yes | +| defaultIsOpen | 默认打开 | Boolean | No | All | Yes | +| isOpen | 是否打开 | Boolean | No | All | Yes | +| crossOffset | 控制菜单相对于触发元素的偏移量 | Number | No | All | Yes | +| offset | 菜单弹出位置的偏移量 | Number | No | All | Yes | +| shouldOverlapWithTrigger | 控制菜单是否与触发元素重叠显示。 | boolean | No | All | Yes | +| placement | 位置，可选 top,bottom,left,right 等 | Boolean | No | All | Yes | +| \_overlay | 菜单的覆盖层参数 | Boolean | No | All | Yes | +| \_presenceTransition | 出现和消失过渡效果参数 | Boolean | No | All | Yes | +| \_backdrop | 背景遮罩参数 | Boolean | No | All | Yes | **Modal**: 弹框 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| isOpen | 是否打开 | Boolean | No | All | Yes | -| onClose | 关闭事件 | () => void | No | All | Yes | -| defaultIsOpen | 默认打开 | Boolean | No | All | Yes | -| size | 尺寸 | String | No | All | Yes | -| initialFocusRef | 模态框打开时最初获得焦点的元素节点 | Any | No | All | Yes | -| finalFocusRef | 模态框关闭时最终获得焦点的元素节点 | Any | No | All | Yes | -| avoidKeyboard | 键盘打开，则 Modal 将向上移动相当于键盘高度 | Boolean | No | All | Yes | -| isKeyboardDismissable | 控制是否可以通过触摸屏幕外部或按下系统返回键来关闭键盘和模态框 | Boolean | No | All | Yes | -| overlayVisible | 控制模态框的背景覆盖层（overlay）是否可见 | Boolean | No | All | Yes | -| backdropVisible | 控制模态框的背景遮罩是否可见 | Boolean | No | All | Yes | -| animationPreset | 动画效果 | String | No | All | Yes | -| _fade | 动画参数 | Object | No | All | Yes | -| _slide | 幻灯片动画参数 | Object | No | All | Yes | -| _overlay | 背景覆盖层参数 | Object | No | All | Yes | -| useRNModal | 是否使用 React Native 的原生Modal组件来实现模态框 | Boolean | No | All | Yes | -| _backdropFade | 背景遮罩参数 | Boolean | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| isOpen | 是否打开 | Boolean | No | All | Yes | +| onClose | 关闭事件 | () => void | No | All | Yes | +| defaultIsOpen | 默认打开 | Boolean | No | All | Yes | +| size | 尺寸 | String | No | All | Yes | +| initialFocusRef | 模态框打开时最初获得焦点的元素节点 | Any | No | All | Yes | +| finalFocusRef | 模态框关闭时最终获得焦点的元素节点 | Any | No | All | Yes | +| avoidKeyboard | 键盘打开，则 Modal 将向上移动相当于键盘高度 | Boolean | No | All | Yes | +| isKeyboardDismissable | 控制是否可以通过触摸屏幕外部或按下系统返回键来关闭键盘和模态框 | Boolean | No | All | Yes | +| overlayVisible | 控制模态框的背景覆盖层（overlay）是否可见 | Boolean | No | All | Yes | +| backdropVisible | 控制模态框的背景遮罩是否可见 | Boolean | No | All | Yes | +| animationPreset | 动画效果 | String | No | All | Yes | +| \_fade | 动画参数 | Object | No | All | Yes | +| \_slide | 幻灯片动画参数 | Object | No | All | Yes | +| \_overlay | 背景覆盖层参数 | Object | No | All | Yes | +| useRNModal | 是否使用 React Native 的原生 Modal 组件来实现模态框 | Boolean | No | All | Yes | +| \_backdropFade | 背景遮罩参数 | Boolean | No | All | Yes | **Popover**: 局部弹框 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| isOpen | 是否打开 | Boolean | No | All | Yes | -| onClose | 关闭事件 | () => void | No | All | Yes | -| onOpen | 打开事件 | () => void | No | All | Yes | -| defaultIsOpen | 默认打开 | Boolean | No | All | Yes | -| size | 尺寸 | String | No | All | Yes | -| initialFocusRef | 模态框打开时最初获得焦点的元素节点 | Any | No | All | Yes | -| finalFocusRef | 模态框关闭时最终获得焦点的元素节点 | Any | No | All | Yes | -| avoidKeyboard | 键盘打开，则 Modal 将向上移动相当于键盘高度 | Boolean | No | All | Yes | -| isKeyboardDismissable | 控制是否可以通过触摸屏幕外部或按下系统返回键来关闭键盘和模态框 | Boolean | No | All | Yes | -| overlayVisible | 控制模态框的背景覆盖层（overlay）是否可见 | Boolean | No | All | Yes | -| backdropVisible | 控制模态框的背景遮罩是否可见 | Boolean | No | All | Yes | -| animationPreset | 动画效果 | String | No | All | Yes | -| _fade | 动画参数 | Object | No | All | Yes | -| _slide | 幻灯片动画参数 | Object | No | All | Yes | -| _overlay | 背景覆盖层参数 | Object | No | All | Yes | -| useRNModal | 是否使用 React Native 的原生Modal组件来实现局部弹框 | Boolean | No | All | Yes | -| trigger | 手动触发显示的元素 | () => void | No | All | Yes | -| shouldOverlapWithTrigger | 控制菜单是否与触发元素重叠显示。 | boolean | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| isOpen | 是否打开 | Boolean | No | All | Yes | +| onClose | 关闭事件 | () => void | No | All | Yes | +| onOpen | 打开事件 | () => void | No | All | Yes | +| defaultIsOpen | 默认打开 | Boolean | No | All | Yes | +| size | 尺寸 | String | No | All | Yes | +| initialFocusRef | 模态框打开时最初获得焦点的元素节点 | Any | No | All | Yes | +| finalFocusRef | 模态框关闭时最终获得焦点的元素节点 | Any | No | All | Yes | +| avoidKeyboard | 键盘打开，则 Modal 将向上移动相当于键盘高度 | Boolean | No | All | Yes | +| isKeyboardDismissable | 控制是否可以通过触摸屏幕外部或按下系统返回键来关闭键盘和模态框 | Boolean | No | All | Yes | +| overlayVisible | 控制模态框的背景覆盖层（overlay）是否可见 | Boolean | No | All | Yes | +| backdropVisible | 控制模态框的背景遮罩是否可见 | Boolean | No | All | Yes | +| animationPreset | 动画效果 | String | No | All | Yes | +| \_fade | 动画参数 | Object | No | All | Yes | +| \_slide | 幻灯片动画参数 | Object | No | All | Yes | +| \_overlay | 背景覆盖层参数 | Object | No | All | Yes | +| useRNModal | 是否使用 React Native 的原生 Modal 组件来实现局部弹框 | Boolean | No | All | Yes | +| trigger | 手动触发显示的元素 | () => void | No | All | Yes | +| shouldOverlapWithTrigger | 控制菜单是否与触发元素重叠显示。 | boolean | No | All | Yes | **Avatar**: 显示用户头像或图像 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| source | 图片地址参数 | Object | No | All | Yes | -| size | 尺寸 | String | No | All | Yes | -| _image | 图片参数 | Object | No | All | Yes | -| wrapperRef | 获取节点 | Boolean | No | All | Yes | +| source | 图片地址参数 | Object | No | All | Yes | +| size | 尺寸 | String | No | All | Yes | +| \_image | 图片参数 | Object | No | All | Yes | +| wrapperRef | 获取节点 | Boolean | No | All | Yes | **Icon**: 展示图标 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| as | 接收矢量图标 | Any | No | All | Yes | -| size | 尺寸 | String | No | All | Yes | -| color | 颜色 | String | No | All | Yes | -| children | 子元素 | JSX.Element | No | All | Yes | -| name | 名称 | String | No | All | Yes | -| viewBox | icon盒子参数 | String | No | All | Yes | -| path | icon地址 | JSX.Element[] | No | All | Yes | -| d | SVG图标的路径 | String | No | All | Yes | +| as | 接收矢量图标 | Any | No | All | Yes | +| size | 尺寸 | String | No | All | Yes | +| color | 颜色 | String | No | All | Yes | +| children | 子元素 | JSX.Element | No | All | Yes | +| name | 名称 | String | No | All | Yes | +| viewBox | icon 盒子参数 | String | No | All | Yes | +| path | icon 地址 | JSX.Element[] | No | All | Yes | +| d | SVG 图标的路径 | String | No | All | Yes | **Image**: 图片 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| source | 图片地址参数 | Object | No | All | Yes | -| alt | 未展示文字 | String | No | All | Yes | -| _alt | 未展示文字样式参数 | Object | No | All | Yes | -| size | 尺寸 | String | No | All | Yes | -| src | 图片地址 | String | No | All | Yes | -| fallbackSource | 指定当主图像源无法加载时显示的备用图像源 | String | No | All | Yes | -| ignoreFallback | 是否忽略备用图像源 | Boolean | No | All | Yes | -| fallbackElement | 指定当主图像源无法加载时显示的备用元素 | JSX.Element | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | +| source | 图片地址参数 | Object | No | All | Yes | +| alt | 未展示文字 | String | No | All | Yes | +| \_alt | 未展示文字样式参数 | Object | No | All | Yes | +| size | 尺寸 | String | No | All | Yes | +| color | 颜色 | String | No | All | Yes | +| src | 图片地址 | String | No | All | Yes | +| fallbackSource | 指定当主图像源无法加载时显示的备用图像源 | String | No | All | Yes | +| ignoreFallback | 是否忽略备用图像源 | Boolean | No | All | Yes | +| fallbackElement | 指定当主图像源无法加载时显示的备用元素 | JSX.Element | No | All | Yes | **ActionSheet**: 操作表 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| isOpen | 是否打开 | Boolean | No | All | Yes | -| onClose | 关闭事件 | () => void | No | All | Yes | -| disableOverlay | 是否有遮罩 | Boolean | No | All | Yes | -| hideDragIndicator | 是否有拖动 | Boolean | No | All | Yes | -| _backdrop | 遮罩参数用样式 | any | No | All | Yes | -| useRNModal | 是否使用 React Native 的原生Modal组件来实现ActionSheet | Boolean | No | All | Yes | +| isOpen | 是否打开 | Boolean | No | All | Yes | +| onClose | 关闭事件 | () => void | No | All | Yes | +| disableOverlay | 是否有遮罩 | Boolean | No | All | Yes | +| hideDragIndicator | 是否有拖动 | Boolean | No | All | Yes | +| \_backdrop | 遮罩参数用样式 | any | No | All | Yes | +| useRNModal | 是否使用 React Native 的原生 Modal 组件来实现 ActionSheet | Boolean | No | All | Yes | **Actionsheet.Content**: 操作表内容 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| _dragIndicatorWrapperOffSet | 在操作表内容上方区域内容参数 | Object | No | All | Yes | -| _dragIndicatorWrapper | 在操作表内容周围区域内容参数 | Object | No | All | Yes | -| _dragIndicator | 在拖动指示器上施加的推力 | Object | No | All | Yes | +| \_dragIndicatorWrapperOffSet | 在操作表内容上方区域内容参数 | Object | No | All | Yes | +| \_dragIndicatorWrapper | 在操作表内容周围区域内容参数 | Object | No | All | Yes | +| \_dragIndicator | 在拖动指示器上施加的推力 | Object | No | All | Yes | **PresenceTransition**: 组件的出现和消失添加动画过渡效果 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| onTransitionComplete | 过渡完成事件 | () => void | No | All | Yes | -| initial | 动画初始状态的属性 | Object | No | All | Yes | -| animate | 动画最终状态的属性 | Object | No | All | Yes | -| exit | 组件在隐藏时的状态 | Boolean | No | All | Yes | -| visible | 是否打开 | Boolean | No | All | Yes | -| children | 子集 | any | No | All | Yes | -| as | 包裹在过渡效果中的元素的类型 | any | No | All | Yes | +| onTransitionComplete | 过渡完成事件 | () => void | No | All | Yes | +| initial | 动画初始状态的属性 | Object | No | All | Yes | +| animate | 动画最终状态的属性 | Object | No | All | Yes | +| exit | 组件在隐藏时的状态 | Boolean | No | All | Yes | +| visible | 是否打开 | Boolean | No | All | Yes | +| animationExited | 过渡动画已经完全退出 | Boolean | No | All | Yes | +| children | 子集 | any | No | All | Yes | +| as | 包裹在过渡效果中的元素的类型 | any | No | All | Yes | **Stagger**: 交错动画效果组件 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| initial | 动画初始状态的属性 | Object | No | All | Yes | -| animate | 动画最终状态的属性 | Object | No | All | Yes | -| exit | 组件在隐藏时的状态 | Boolean | No | All | Yes | -| visible | 是否打开 | Boolean | No | All | Yes | +| initial | 动画初始状态的属性 | Object | No | All | Yes | +| animate | 动画最终状态的属性 | Object | No | All | Yes | +| exit | 组件在隐藏时的状态 | Boolean | No | All | Yes | +| visible | 是否打开 | Boolean | No | All | Yes | **Slide**: 实现滑动动画 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| in | 显示隐藏 | Boolean | No | All | Yes | -| duration | 动画时长 | Number | No | All | Yes | -| placement | 位置 | String | No | All | Yes | +| in | 显示隐藏 | Boolean | No | All | Yes | +| duration | 动画事件 | Number | No | All | Yes | +| placement | 位置 | String | No | All | Yes | **FAB**: 浮动按钮 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| placement | 位置 | String | No | All | Yes | -| label | 文本参数 | String | No | All | Yes | -| icon | 图标 | React.Element | No | All | Yes | -| renderInPortal | 是否将 FAB 渲染在一个 Portal(Portal 是一种在 React 中用于将子组件渲染到父组件以外的 DOM 节点中的技术) | Boolean | No | All | Yes | +| placement | 位置 | String | No | All | Yes | +| label | 文本参数 | String | No | All | Yes | +| icon | 图标 | React.Element | No | All | Yes | +| renderInPortal | 是否将 FAB 渲染在一个 Portal(Portal 是一种在 React 中用于将子组件渲染到父组件以外的 DOM 节点中的技术) | Boolean | No | All | Yes | -**Hidden**: 根据colorMode或平台响应性地切换子组件的可见性值 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +**Hidden**: 根据 colorMode 或平台响应性地切换子组件的可见性值 +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| from | 屏幕尺寸的起点，当屏幕尺寸大于等于这个起点时，组件将被隐藏 | String | No | All | Yes | -| till | 屏幕尺寸的终点，当屏幕尺寸小于这个终点时，组件将被隐藏 | String | No | All | Yes | -| only | 指定一个或多个特定的屏幕尺寸，只有在这些尺寸下组件才会显示，其他尺寸下将被隐藏 | String | No | All | Yes | -| colorMode | 组件在不同颜色模式下的显示状态。NativeBase 通常支持多种颜色模式，如 light（浅色模式）、dark（深色模式）等。 | React.Element | No | All | Yes | -| platform | 系统平台 | React.Element | No | All | Yes | -| children | 子元素 | React.Element | No | All | Yes | -| isSSR | 组件是否在服务器端渲染（SSR）环境中 | Boolean | No | All | Yes | +| from | 屏幕尺寸的起点，当屏幕尺寸大于等于这个起点时，组件将被隐藏 | String | No | All | Yes | +| till | 屏幕尺寸的终点，当屏幕尺寸小于这个终点时，组件将被隐藏 | String | No | All | Yes | +| only | 指定一个或多个特定的屏幕尺寸，只有在这些尺寸下组件才会显示，其他尺寸下将被隐藏 | String | No | All | Yes | +| colorMode | 组件在不同颜色模式下的显示状态。NativeBase 通常支持多种颜色模式，如 light（浅色模式）、dark（深色模式）等。 | React.Element | No | All | Yes | +| platform | 系统平台 | React.Element | No | All | Yes | +| children | 子元素 | React.Element | No | All | Yes | +| isSSR | 组件是否在服务器端渲染（SSR）环境中 | Boolean | No | All | Yes | **KeyboardAvoidingView**: 拉起键盘视图向上移动的垂直偏移量 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | :------------------: | :----------------------------------------------------------: | :-------------------: | :------: | :------: | :---------------: | -| behavior | 键盘弹出时的行为 | String 或 Undefined | No | All | Yes | -| contentContainerStyle | 设置该组件内部内容容器的样式 | Object | No | All | Yes | -| keyboardVerticalOffset | 当键盘出现时，视图向上移动的垂直偏移量 | Number或Undefined | No | All | Yes | -| enabled | 用于控制KeyboardAvoidingView是否生效 | Boolean或Undefined | No | All | Yes | - +| behavior | 键盘弹出时的行为 | String 或 Undefined | No | All | Yes | +| contentContainerStyle | 设置该组件内部内容容器的样式 | Object | No | All | Yes | +| keyboardVerticalOffset | 当键盘出现时，视图向上移动的垂直偏移量 | Number 或 Undefined | No | All | Yes | +| enabled | 用于控制 KeyboardAvoidingView 是否生效 | Boolean 或 Undefined | No | All | Yes | -**Other**：包含hooks和外用组件 -| Name | Description | Required | Platform | HarmonyOS Support | +**Other**: 包含 hooks 和外用组件 +| Name | Description | Required | Platform | HarmonyOS Support | | ---------------------- | ----------- | -------- | ----------------- | ----------------- | -| Scrollview | 导出的是RN原生的Scrollview，可直接用RN的Scrollview | NO | All | YES | -| View | 导出的是RN原生的View，可直接用RN的View | NO | All | YES | -| FlatList | 导出的是RN原生的FlatList，可直接用RN的FlatList | NO | All | YES | -| useDisclose | 处理常见的打开、关闭或切换场景，并可以控制反馈组件，如Modal、AlertDialog、Drawer等。 | NO | All | YES | -| useBreakpointValue | 用于呈现分段列表的高性能接口 | NO | All | YES | -| SectionList | 导出的是RN原生的SectionList，可直接用RN的SectionList | NO | All | YES | -| useClipboard | 使用剪贴板控件并控制将内容复制到剪贴板 | NO | All | YES | -| useMediaQuery | 检测单个媒体查询或多个媒体查询之间的匹配。React Native本身不支持媒体查询，因此useMediaQuery仍然有限 | NO | All | YES | -| useToken | 解析主题中的设计标记. | NO | All | YES | -| useColorMode |设置或检索颜色模式 | NO | All | YES | -| useColorModeValue | 基于活动颜色模式值传递的参数中检索值 | NO | All | YES | -| useContrastText | 提供与作为参数传递的背景颜色的颜色对比文本颜色（lightText或darkText） | NO | All | YES | -| useAccessibleColors | 更新您的颜色配置，以在应用程序中获得更好的颜色和对比度可访问性。默认情况下，可访问的颜色是关闭的如果您想继续使用可访问的文本颜色，可以使用此挂钩。您还可以使用extendTheme在NativeBaseProvider的配置中传递它 | NO | All | YES | -| Todo-List | 用本库的组件写的案例，如有业务需要可自行编写适合的组件 | NO | All | YES | -| AppBar | 用本库的组件写的案例，如有业务需要可自行编写适合的组件 | NO | All | YES | -| Card |用本库的组件写的案例，如有业务需要可自行编写适合的组件| NO | All | YES | -| Drawer Navigation | 快速地使用 [@react-native-oh-tpl/react-navigation-drawer](/zh-cn/react-navigation-drawer.md) | NO | All | YES | -| Tab View | 快速地使用 [@react-native-oh-tpl/react-native-tab-view 文档](/zh-cn/react-native-tab-view.md) in NB | NO | All | YES | -| Swipe List | 快速地使用 [@react-native-oh-tpl/react-native-swipe-list-view](/zh-cn/react-native-swipe-list-view.md) | NO | All | YES | -| Form with Validation | 用本库的组件写的案例，如有业务需要可自行编写适合的组件 | NO | All | YES | -| Login/Signup Forms | 用本库的组件写表单登录的案例，如有业务需要可自行编写适合的组件| NO | All | YES | -| SearchBar | 用本库的组件写的搜索案例，如有业务需要可自行编写适合的组件 | NO | All | YES | -| App drawer | 使用FlatList创建类似应用程序抽屉的布局非常常见，如有业务需要可自行编写适合的组件 | NO | All | YES | -| Footer |用本库的组件写的Footer案例，如有业务需要可自行编写适合的组件 | NO | All | YES | - -## 遗留问题 - -## 其他 - -- 网站文档图标要用@expo/vector-icons（需要用到expo脚手架才可以），如果没有用到expo脚手架的可以用[react-native-vector-icons 文档](/zh-cn/react-native-vector-icons.md)平替 -- Tooltip 当用户与元素交互时，工具提示会提供简短的信息性消息。工具提示的启动方法包括：通过鼠标悬停手势或键盘悬停手势。这个组件是在web端用的 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/GeekyAnts/NativeBase/blob/master/LICENSE) ，请自由地享受和参与开源。 +| Scrollview | 导出的是 RN 原生的 Scrollview，可直接用 RN 的 Scrollview | NO | All | YES | +| View | 导出的是 RN 原生的 View，可直接用 RN 的 View | NO | All | YES | +| FlatList | 导出的是 RN 原生的 FlatList，可直接用 RN 的 FlatList | NO | All | YES | +| useDisclose | 处理常见的打开、关闭或切换场景，并可以控制反馈组件，如 Modal、AlertDialog、Drawer 等。 | NO | All | YES | +| useBreakpointValue | 用于呈现分段列表的高性能接口 | NO | All | YES | +| SectionList | 导出的是 RN 原生的 SectionList，可直接用 RN 的 SectionList | NO | All | YES | +| useClipboard | 使用剪贴板控件并控制将内容复制到剪贴板 | NO | All | YES | +| useMediaQuery | 检测单个媒体查询或多个媒体查询之间的匹配。React Native 本身不支持媒体查询，因此 useMediaQuery 仍然有限 | NO | All | YES | +| useToken | 解析主题中的设计标记. | NO | All | YES | +| useColorMode |设置或检索颜色模式 | NO | All | YES | +| useColorModeValue | 基于活动颜色模式值传递的参数中检索值 | NO | All | YES | +| useContrastText | 提供与作为参数传递的背景颜色的颜色对比文本颜色（lightText 或 darkText） | NO | All | YES | +| useAccessibleColors | 更新您的颜色配置，以在应用程序中获得更好的颜色和对比度可访问性。默认情况下，可访问的颜色是关闭的如果您想继续使用可访问的文本颜色，可以使用此挂钩。您还可以使用 extendTheme 在 NativeBaseProvider 的配置中传递它 | NO | All | YES | +| Todo-List | 用本库的组件写的案例，如有业务需要可自行编写适合的组件 | NO | All | YES | +| AppBar | 用本库的组件写的案例，如有业务需要可自行编写适合的组件 | NO | All | YES | +| Card |用本库的组件写的案例，如有业务需要可自行编写适合的组件| NO | All | YES | +| Drawer Navigation | 快速地使用 [@react-native-oh-tpl/react-navigation-drawer](/zh-cn/react-navigation-drawer.md) | NO | All | YES | +| Tab View | 快速地使用 [@react-native-oh-tpl/react-native-tab-view 文档](/zh-cn/react-native-tab-view.md) in NB | NO | All | YES | +| Swipe List | 快速地使用 [@react-native-oh-tpl/react-native-swipe-list-view](/zh-cn/react-native-swipe-list-view.md) | NO | All | YES | +| Form with Validation | 用本库的组件写的案例，如有业务需要可自行编写适合的组件 | NO | All | YES | +| Login/Signup Forms | 用本库的组件写表单登录的案例，如有业务需要可自行编写适合的组件| NO | All | YES | +| SearchBar | 用本库的组件写的搜索案例，如有业务需要可自行编写适合的组件 | NO | All | YES | +| App drawer | 使用 FlatList 创建类似应用程序抽屉的布局非常常见，如有业务需要可自行编写适合的组件 | NO | All | YES | +| Footer |用本库的组件写的 Footer 案例，如有业务需要可自行编写适合的组件 | NO | All | YES | + +## Known Issues + +## Others + +- 网站文档图标要用@expo/vector-icons（需要用到 expo 脚手架才可以），如果没有用到 expo 脚手架的可以用[react-native-vector-icons 文档](/zh-cn/react-native-vector-icons.md)平替 +- Tooltip 当用户与元素交互时，工具提示会提供简短的信息性消息。工具提示的启动方法包括: 通过鼠标悬停手势或键盘悬停手势。这个组件是在 web 端用的 + +## License + +This project is licensed under [The MIT License (MIT)](https://github.com/GeekyAnts/NativeBase/blob/master/LICENSE). -- Gitee From 385b7568ee01d8447e0ecab27c2a3b48d9ba67d7 Mon Sep 17 00:00:00 2001 From: ljje Date: Mon, 28 Oct 2024 14:54:00 +0800 Subject: [PATCH 02/53] docs: [Issues: #IB07UG] Parse-SDK-JS.md --- en/Parse-SDK-JS.md | 258 ++++++++++++++++++++++----------------------- 1 file changed, 125 insertions(+), 133 deletions(-) diff --git a/en/Parse-SDK-JS.md b/en/Parse-SDK-JS.md index 618ec207..b9fdce29 100644 --- a/en/Parse-SDK-JS.md +++ b/en/Parse-SDK-JS.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

Parse-SDK-JS

@@ -12,23 +12,22 @@

+> [!TIP] [GitHub address](https://github.com/parse-community/Parse-SDK-JS) -> [!TIP] [Github 地址](https://github.com/parse-community/Parse-SDK-JS) - -## 安装与使用 +## Installation and Usage > [!TIP] 需要配套的服务和三方依赖 -Parse JS SDK 兼容以下版本的 Parse Server，Parse Server服务端搭建可参考[https://github.com/parse-community/parse-server/blob/alpha/README.md](https://github.com/parse-community/parse-server/blob/alpha/README.md)。 +Parse JS SDK 兼容以下版本的 Parse Server，Parse Server 服务端搭建可参考[https://github.com/parse-community/parse-server/blob/alpha/README.md](https://github.com/parse-community/parse-server/blob/alpha/README.md)。 | Parse JS SDK | Parse Server | | :--------------: | :--------------: | | >= 4.0.0 < 5.0.0 | >= 6.0.0 < 7.0.0 | | >= 5.0.0 | >= 7.0.0 | -> [!TIP] 本库依赖[@react-native-oh-tpl/async-storage文档](/zh-cn/react-native-async-storage-async-storage.md) 和 [@react-native-oh-tpl/react-native-get-random-values 文档](/zh-cn/react-native-get-random-values.md) +> [!TIP] 本库依赖[@react-native-oh-tpl/async-storage 文档](/zh-cn/react-native-async-storage-async-storage.md) 和 [@react-native-oh-tpl/react-native-get-random-values 文档](/zh-cn/react-native-get-random-values.md) -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -46,24 +45,16 @@ yarn add parse@5.3.0 -下面的代码展示了这个库的基本使用场景 +The following code shows the basic use scenario of the repository: ```jsx import React, { useState } from "react"; -import { - View, - Text, - Button, - Alert, - StyleSheet, -} from "react-native"; +import { View, Text, Button, Alert, StyleSheet } from "react-native"; import AsyncStorage from "@react-native-async-storage/async-storage"; import Parse from "parse/react-native"; Parse.setAsyncStorage(AsyncStorage); -// 初始化Parse，确保appId、javaScriptKey、masterKey与parse server配置一致 Parse.initialize("your appId", "your javaScriptKey", "your masterKey"); -// parse server服务地址 Parse.serverURL = "your parse server url"; Parse.CoreManager.set("REQUEST_HEADERS", { "X-Parse-REST-API-Key": "your RESTAPIKEY", @@ -72,65 +63,65 @@ Parse.CoreManager.set("REQUEST_HEADERS", { const ParseExample = () => { const [data, setData] = useState < any > []; - // 添加数据 Example of saving data async function saveData() { const TestObject = Parse.Object.extend("TestObject"); const testObject = new TestObject(); - testObject.set("name", "张三"); - testObject.set("description", "我是rn使用parse-sdk-js库创建的张三!"); + testObject.set("name", "Zhang San"); + testObject.set( + "description", + "I am Zhang San, created by rn using the parse sdk js library!" + ); try { const result = await testObject.save(); if (result) { - Alert.alert("添加成功"); + Alert.alert("Added successfully"); } else { - Alert.alert("添加失败"); + Alert.alert("Add failed"); } console.log("Object saved successfully:", result); } catch (error) { console.error("Error while saving object:", error); } } - // 删除数据 async function deleteData() { const TestObject = Parse.Object.extend("TestObject"); const query = new Parse.Query(TestObject); - query.equalTo("name", "李四"); + query.equalTo("name", "Li Si"); try { const results = await query.first(); if (results) { Parse.Object.destroyAll(results).then((res) => { - Alert.alert("删除成功"); + Alert.alert("Delete successfully"); }); } else { - Alert.alert("未找到 李四"); + Alert.alert("Li Si not found"); } } catch (error) { console.error("Error while fetching objects:", error); } } - // 修改数据 async function updateData() { const TestObject = Parse.Object.extend("TestObject"); const query = new Parse.Query(TestObject); try { - query.equalTo("name", "张三"); + query.equalTo("name", "Zhang San"); const results = await query.first(); if (results) { console.log(results, 666); - results.set("name", "李四"); - results.set("description", "我的名字改成了李四"); + results.set("name", "Li Si"); + results.set("description", "My name has been changed to Li Si"); results.save().then((update) => { - Alert.alert("修改成功"); + Alert.alert("Modified successfully"); }); } else { - Alert.alert("修改失败"); + Alert.alert("Modified filed"); } } catch (error) { console.error("Error while fetching objects:", error); } } - // 查询数据 Example of fetching data + async function fetchData() { const TestObject = Parse.Object.extend("TestObject"); const query = new Parse.Query(TestObject); @@ -138,7 +129,7 @@ const ParseExample = () => { try { const results = await query.find(); const resultJson = results.map((item) => item.toJSON()); - console.log("查询成功:", resultJson); + console.log("query was successful:", resultJson); setData(resultJson); } catch (error) { console.error("Error while fetching objects:", error); @@ -148,27 +139,36 @@ const ParseExample = () => { return ( - 模拟数据进行增、删、改、查 + Simulate data for adding, deleting, modifying, and querying - TestObject 类（表） + TestObject Class (Table) - + onTryDeepLinking - + onIsAvailable - + close - + tryDeepLinking - + closeAuth - + warmup - + mayLaunchUrl - + @@ -257,18 +257,18 @@ export const tryDeepLinking = async () => { }; ``` -## 使用 Codegen +## Use Codegen -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/zh-cn/codegen.md). ## Link -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. ``` -在工程根目录的 oh-package.json 添加 overrides字段 +Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project { ... "overrides": { @@ -277,7 +277,7 @@ export const tryDeepLinking = async () => { } ``` -### 配置Entry +### 1.配置Entry **1.在 entry/src/main/ets/entryability 下创建 BrowserManagerAbility.ets** @@ -330,9 +330,9 @@ export default class BrowserManagerAbility extends UIAbility { **2.在 entry/src/main/module.json5注册BrowserManagerAbility** ``` -"ablilities":[{ +"abilities":[{ "name": "BrowserManagerAbility", - "srcEntrance": "./ets/entryability/BrowserManagerAbility.ets", + "srcEntry": "./ets/entryability/BrowserManagerAbility.ets", "description": "$string:EntryAbility_desc", "icon": "$media:icon", "startWindowIcon": "$media:startIcon", @@ -389,18 +389,15 @@ export default class BrowserManagerAbility extends UIAbility { } ``` -### 2.引入原生端代码 - -目前有两种方法： +### 2. Introducing Native Code -1. 通过 har 包引入。 -2. 直接链接源码。 +Currently, two methods are available: -方法一：通过 har 包引入 (推荐) +Method 1 (recommended): Use the HAR file. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ``` "dependencies": { @@ -409,22 +406,22 @@ export default class BrowserManagerAbility extends UIAbility { } ``` -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ``` cd entry ohpm install ``` -方法二：直接链接源码 +Method 2: Directly link to the source code. -> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNInAppBrowserPackage +### 3. Introducing RNInAppBrowserPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -438,30 +435,30 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4. Running -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ``` cd entry ohpm install ``` -然后编译、运行即可。 +Then build and run the code. -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-inappbrowser-reborn Releases](https://github.com/react-native-oh-library/react-native-inappbrowser/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-inappbrowser-reborn Releases](https://github.com/react-native-oh-library/react-native-inappbrowser/releases) ## API -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | @@ -474,7 +471,7 @@ ohpm install | warmup | Warm up the browser process - Android Only. | function | no | Android | yes | | mayLaunchUrl | Tells the browser of a likely future navigation to a URL. The most likely URL has to be specified first. Optionally, a list of other likely URLs can be provided. They are treated as less likely than the first one, and have to be sorted in decreasing priority order. These additional URLs may be ignored. All previous calls to this method will be deprioritized - Android Only. | function | no | Android | yes | -## 属性 +## Properties **iOS Options** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -508,8 +505,7 @@ ohpm install | showInRecents | Determining whether browsed website should be shown as separate entry in Android recents/multitasking view. [true/false] | Boolean | NO | Android | NO | | includeReferrer | Determining whether to include your package name as referrer for the website to track. [true/false] | Boolean | NO | Android | NO | - -## 遗留问题 +## Known Issues - [ ] 打开浏览器时，不能指定浏览器设置阅读模式 [#1](https://github.com/react-native-oh-library/react-native-inappbrowser/issues/1) - [ ] 打开浏览器，无法使文稿动起来 [#2](https://github.com/react-native-oh-library/react-native-inappbrowser/issues/2) @@ -520,8 +516,8 @@ ohpm install - [ ] 浏览器设置是否重复使用前一次会话的cookie [#7](https://github.com/react-native-oh-library/react-native-inappbrowser/issues/7) - [ ] 浏览器设置模态框的自定义尺寸 [#8](https://github.com/react-native-oh-library/react-native-inappbrowser/issues/8) -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/proyecto26/react-native-inappbrowser/blob/develop/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/proyecto26/react-native-inappbrowser/blob/develop/LICENSE). -- Gitee From 18c93976c641a38f2b8c8d4645fcfe858ed867c6 Mon Sep 17 00:00:00 2001 From: ljje Date: Mon, 28 Oct 2024 14:58:50 +0800 Subject: [PATCH 32/53] docs: [Issues: #IB07UG] react-native-json-tree.md --- en/react-native-json-tree.md | 41 ++++++++++++++++-------------------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/en/react-native-json-tree.md b/en/react-native-json-tree.md index ab5a81b2..3b618556 100644 --- a/en/react-native-json-tree.md +++ b/en/react-native-json-tree.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-json-tree

@@ -12,9 +12,9 @@

-> [!TIP] [Github 地址](https://github.com/Dean177/react-native-json-tree) +> [!TIP] [GitHub address](https://github.com/Dean177/react-native-json-tree) -## 安装与使用 +## Installation and Usage #### **npm** @@ -30,9 +30,9 @@ yarn add react-native-json-tree@^1.3.0 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import React from "react"; @@ -136,7 +136,6 @@ export default () => { name: "moon", }; - // 格式化日期 const formatDate = (date: any) => { if (!(date instanceof Date)) return ""; const year = date.getFullYear(); @@ -145,7 +144,6 @@ export default () => { return `${year}-${month}-${day}`; }; - // 根据数据类型格式化, 展示经过处理的数据 const postprocessValue = (value: any) => { if (value instanceof Date) { return formatDate(value); @@ -164,7 +162,6 @@ export default () => { }; const isCustomNode = (value: any) => { - // 如果节点值是数字，则使用自定义渲染 return typeof value === "number"; }; @@ -255,24 +252,24 @@ export default () => { }; ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: -1. RNOH：0.72.29; SDK：HarmonyOS NEXT Developer Beta6; IDE：DevEco Studio 5.0.3.706; ROM：NEXT.0.0.36; +1. RNOH: 0.72.29; SDK: HarmonyOS NEXT Developer Beta6; IDE: DevEco Studio 5.0.3.706; ROM: NEXT.0.0.36; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; -## 属性 +## Properties -详细请查看 [react-native-json-tree 的文档介绍](https://github.com/Dean177/react-native-json-tree) +For details, see [react-native-json-tree docs](https://github.com/Dean177/react-native-json-tree) -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------ | ----------------------------------------------------------------------------------------- | ------------ | -------- | -------- | ----------------- | @@ -290,12 +287,10 @@ export default () => { | `postprocessValue` | `For customizing values before they are rendered`. | `()=>void` | No | All | Yes | | `isCustomNode` | `Specify which nodes should use custom rendered properties.` | `()=>bool` | No | All | Yes | -## 遗留问题 +## Known Issues -## 其他 +## Others -- JSONTree 组件的 collectionLimit 属性不生效，与 iOS 一致 [issue#163](https://github.com/Dean177/react-native-json-tree/issues/163) +## License -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/Dean177/react-native-json-tree/blob/master/LICENSE.md) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/Dean177/react-native-json-tree/blob/master/LICENSE.md). -- Gitee From 704bb4d40ec11accdc0dcc49d339b01199a32dfe Mon Sep 17 00:00:00 2001 From: ljje Date: Mon, 28 Oct 2024 14:58:58 +0800 Subject: [PATCH 33/53] docs: [Issues: #IB07UG] react-native-keep-awake.md --- en/react-native-keep-awake.md | 207 +++++++++++++++++----------------- 1 file changed, 105 insertions(+), 102 deletions(-) diff --git a/en/react-native-keep-awake.md b/en/react-native-keep-awake.md index 8dbdd99d..bb3c2345 100644 --- a/en/react-native-keep-awake.md +++ b/en/react-native-keep-awake.md @@ -1,5 +1,6 @@ -> 模板版本：v0.2.0 + +> Template version: v0.2.0

react-native-keep-awake

@@ -14,19 +15,15 @@

+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-keep-awake) +## Installation and Usage +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-tpl/react-native-keep-awake Releases](https://github.com/react-native-oh-library/react-native-keep-awake/releases). +Go to the project directory and execute the following instruction: -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-keep-awake) - -## 安装与使用 - -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-keep-awake Releases](https://github.com/react-native-oh-library/react-native-keep-awake/releases)，并下载适用版本的 tgz 包。 - -进入到工程目录并输入以下命令： - ->[!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -44,74 +41,84 @@ yarn add @react-native-oh-tpl/react-native-keep-awake@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: ->[!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js -import React, { useState, useEffect } from 'react'; -import { - Text, - Button, -} from 'react-native'; +import React, { useState, useEffect } from "react"; +import { Text, Button } from "react-native"; -import KeepAwake , { activateKeepAwake,deactivateKeepAwake,useKeepAwake} from 'react-native-keep-awake' +import KeepAwake, { + activateKeepAwake, + deactivateKeepAwake, + useKeepAwake, +} from "react-native-keep-awake"; export function KeepAwakeExample() { - useKeepAwake(); - - const handleClick = (buttonId: number) => { - switch (buttonId) { - case 1: - deactivateKeepAwake(); - break; - case 2: - activateKeepAwake(); - break; - case 3: - deactivateKeepAwake(); - break; - case 4: - KeepAwake.activate(); - break; - case 5: - KeepAwake.deactivate(); - break; - default: - break; - } - }; - - return ( - <> - Button 1:hook默认方法开启(常亮),----useKeepAwake(),点击按键1关闭常亮 - - - Button 2:functions方法开启----activateKeepAwake() - - - Button 3:function方法关闭----deactivateKeepAwake() - - - Button 4:老接口方法----KeepAwake.activate() - - - Button 5:老接口方法----KeepAwake.deactivate() - - - ); - + useKeepAwake(); + + const handleClick = (buttonId: number) => { + switch (buttonId) { + case 1: + deactivateKeepAwake(); + break; + case 2: + activateKeepAwake(); + break; + case 3: + deactivateKeepAwake(); + break; + case 4: + KeepAwake.activate(); + break; + case 5: + KeepAwake.deactivate(); + break; + default: + break; + } + }; + + return ( + <> + + Button 1: Hook default method enabled (always + on),----useKeepAwake(),Click button 1 to turn off the constant light + + + + + Button 2: Enable functions method----activateKeepAwake() + + + + + Button 3: Close the function method----deactivateKeepAwake() + + + + + Button 4: Old interface method----KeepAwake.activate() + + + + + Button 5: Old interface method----KeepAwake.deactivate() + + + + ); } - ``` ## Link -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 在工程根目录的 `oh-package.json5` 添加 overrides字段 +### Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -122,18 +129,15 @@ export function KeepAwakeExample() { } ``` -### 2.引入原生端代码 +### 2. Introducing Native Code -目前有两种方法： +Currently, two methods are available: -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +Method 1 (recommended): Use the HAR file. -方法一：通过 har 包引入 +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -142,20 +146,20 @@ export function KeepAwakeExample() { } ``` -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ```bash cd entry ohpm install ``` -方法二：直接链接源码 +Method 2: Directly link to the source code. > [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -164,16 +168,16 @@ ohpm install } ``` -打开终端，执行： +run the following instruction on the terminal: ```bash cd entry ohpm install --no-link ``` -### 3.在 ArkTs 侧引入 RNKeepAwakePackage +### 3. Introducing RNKeepAwakePackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -187,55 +191,54 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4. Running -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ```bash cd entry ohpm install ``` -然后编译、运行即可。 +Then build and run the code. -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-keep-awake Releases](https://github.com/react-native-oh-library/react-native-keep-awake/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-keep-awake Releases](https://github.com/react-native-oh-library/react-native-keep-awake/releases) -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: -1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18、HarmonyOS NEXT Developer Preview0 B.0.60、HarmonyOS NEXT Developer Preview2 B.0.73; IDE：DevEco Studio 5.0.3.200; ROM：2.0.0.18; +1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1 B.0.18、HarmonyOS NEXT Developer Preview0 B.0.60、HarmonyOS NEXT Developer Preview2 B.0.73; IDE: DevEco Studio 5.0.3.200; ROM: 2.0.0.18; ## 使用方法 -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. > [!tip] 功能函数形式使用下，新老接口均可使用。 -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Required | Platform | HarmonyOS Support | -| ---------------------- |-------------------------| -------- | -------- | ----------------- | -| `` | 组件形式使用，开启当前屏幕常亮模式 | No | All | yes | +| Name | Description | Required | Platform | HarmonyOS Support | +| ---------------------- | ---------------------------------------------- | -------- | -------- | ----------------- | +| `` | 组件形式使用，开启当前屏幕常亮模式 | No | All | yes | | KeepAwake.activate() | 功能函数形式使用，开启当前屏幕常亮模式(老接口) | No | All | yes | | KeepAwake.deactivate() | 功能函数形式使用，开启当前屏幕常亮模式(老接口) | No | All | yes | -| useKeepAwake() | hooks形式使用 | No | All | yes | +| useKeepAwake() | hooks 形式使用 | No | All | yes | | activateKeepAwake() | 功能函数形式使用，开启当前屏幕常亮模式(新接口) | No | All | yes | | deactivateKeepAwake() | 功能函数形式使用，关闭当前屏幕常亮模式(新接口) | No | All | yes | -## 遗留问题 - -## 其他 +## Known Issues -## 开源协议 +## Others -本项目基于 [The MIT License (MIT)](https://github.com/corbt/react-native-keep-awake/blob/master/LICENCE) ，请自由地享受和参与开源。 +## License +This project is licensed under [The MIT License (MIT)](https://github.com/corbt/react-native-keep-awake/blob/master/LICENCE). - \ No newline at end of file + -- Gitee From 77e006e1d71ebc83a2ce8473977a13e67bc8f331 Mon Sep 17 00:00:00 2001 From: ljje Date: Mon, 28 Oct 2024 14:59:44 +0800 Subject: [PATCH 34/53] docs: [Issues: #IB07UG] react-native-keyboard-controller.md --- en/react-native-keyboard-controller.md | 120 +++++++++++-------------- 1 file changed, 53 insertions(+), 67 deletions(-) diff --git a/en/react-native-keyboard-controller.md b/en/react-native-keyboard-controller.md index b89e5016..14b3998d 100644 --- a/en/react-native-keyboard-controller.md +++ b/en/react-native-keyboard-controller.md @@ -1,6 +1,4 @@ - - -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-keyboard-controller

@@ -14,16 +12,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-keyboard-controller) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-keyboard-controller) +## Installation and Usage -## 安装与使用 +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-tpl/react-native-keyboard-controller Releases](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases). -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-keyboard-controller Releases](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases)，并下载适用版本的 tgz 包。 +Go to the project directory and execute the following instruction: -进入到工程目录并输入以下命令： - -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -40,11 +37,13 @@ yarn add @react-native-oh-tpl/react-native-keyboard-controller@file:# ``` -另外本库依赖三方库[react-native-reanimated](https://github.com/react-native-oh-library/react-native-harmony-reanimated)，请按照[react-native-reanimated指导文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-reanimated.md)引入此依赖库。 +The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-reanimated. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. + +If it is not included, follow the guide provided in [react-native-reanimated docs](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-reanimated.md) to add it to your project. -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import React from 'react'; @@ -115,11 +114,11 @@ export default App; ## Link -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 1. 在工程根目录的 `oh-package.json` 添加 overrides 字段 +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -130,19 +129,15 @@ export default App; } ``` -### 2. 引入原生端代码 +### 2. Introducing Native Code -目前有两种方法： +Currently, two methods are available: -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +Method 1 (recommended): Use the HAR file. -2. 直接链接源码。 +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -方法一：通过 har 包引入（推荐） - -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json @@ -153,22 +148,22 @@ export default App; ``` -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ```bash cd entry ohpm install ``` -方法二：直接链接源码 +Method 2: Directly link to the source code. -> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3. 配置 CMakeLists 和引入 RNKeyboardControllerPackage，RNStatusBarManagerCompatPackage +### 3. Configuring CMakeLists and Introducing RNKeyboardControllerPackage，RNStatusBarManagerCompatPackage -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: ```diff project(rnapp) @@ -206,7 +201,7 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) # RNOH_END: manual_package_linking_2 ``` -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: ```diff #include "RNOH/PackageProvider.h" @@ -225,9 +220,9 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4. 在 ArkTs 侧引入 RNKeyboardControllerPackage，RNStatusBarManagerCompatPackage +### 4. Introducing RNKeyboardControllerPackage，RNStatusBarManagerCompatPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff + import {RNKeyboardControllerPackage,RNStatusBarManagerCompatPackage} from "@react-native-oh-tpl/react-native-keyboard-controller/ts"; @@ -241,33 +236,32 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5. 运行 +### 5. Running -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ```bash cd entry ohpm install ``` -然后编译、运行即可。 +Then build and run the code. -## 约束与限制 +## Constraints +### Compatibility -### 兼容性 +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-keyboard-controller Releases](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-keyboard-controller Releases](https://github.com/react-native-oh-library/react-native-keyboard-controller/releases) ## API -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. **Hooks**:键盘控制器相关的钩子函数 | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -279,8 +273,7 @@ ohpm install | useFocusedInputHandler | 设置监听输入框回调事件的钩子函数 | function | no | iOS,Android |partially | | useReanimatedFocusedInput | 当前聚焦的输入控件文本变化事件回调的钩子函数 | function | no | iOS,Android |no | - -**KeyboardController**：键盘控制器 +**KeyboardController**: 键盘控制器 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -291,7 +284,7 @@ ohpm install | addListener: (eventName: string) => void | 添加键盘的监听事件 | function | no | iOS,Android | yes | | removeListeners: (count: number) => void | 删除键盘的监听事件 | function | no | iOS,Android | yes | -**StatusBarManagerCompat**：状态栏控制器 +**StatusBarManagerCompat**: 状态栏控制器 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -321,12 +314,9 @@ ohpm install | ---- | ----------- | ---- | -------- | -------- | ------------------ | | windowDidResize | 监听窗口事件 | string | no | Android | no | - - - ## 组件 -**KeyboardControllerView**：键盘控制器 +**KeyboardControllerView**: 键盘控制器 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -342,8 +332,7 @@ ohpm install | onFocusedInputSelectionChanged?: DirectEventHandler< FocusedInputSelectionChangedEvent> | 聚焦输入框文本选择的监听事件 | function | no | iOS,Android | no | | children | JSX element 子组件 | JSX.Element | no | iOS,Android | yes | - -**KeyboardGestureArea**：手势控制键盘组件 +**KeyboardGestureArea**: 手势控制键盘组件 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -351,8 +340,7 @@ ohpm install | enableSwipeToDismiss | 键盘随手势向下滑动隐藏 | boolean | no | Android | no | | interpolator | 设置键盘随手势滑动的动画模式 | linear / ios/ linear | no | Android | no | - -**KeyboardAvoidingView**：键盘控制器的容器组件 +**KeyboardAvoidingView**: 键盘控制器的容器组件 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -364,7 +352,7 @@ ohpm install | style | `KeyboardAvodingView`的CSS属性 | [ ViewStyle ](https://reactnative.dev/docs/view#props) | no | iOS,Android | yes | | children | JSX element 子组件 | JSX.Element | no | iOS,Android | yes | -**KeyboardAwareScrollView**：滚动键盘控制器的容器组件 +**KeyboardAwareScrollView**: 滚动键盘控制器的容器组件 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -376,7 +364,7 @@ ohpm install | style | `KeyboardAwareScrollView`的CSS属性 | [ ViewStyle ](https://reactnative.dev/docs/view#props) | no | iOS,Android | yes | | children | JSX element 子组件 | JSX.Element | no | iOS,Android | yes | -**KeyboardStickyView**：滚动键盘控制器的容器组件 +**KeyboardStickyView**: 滚动键盘控制器的容器组件 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -384,7 +372,7 @@ ohpm install | style | `KeyboardStickyView`的CSS属性 | [ ViewStyle ](https://reactnative.dev/docs/view#props) | no | iOS,Android | yes | | children | JSX element 子组件 | JSX.Element | no | iOS,Android | yes | -**KeyboardToolbar**：是显示在键盘上方的组件，带有`Prev`/`Next`和 +**KeyboardToolbar**: 是显示在键盘上方的组件，带有`Prev`/`Next`和 *“完成”按钮。 | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -401,18 +389,16 @@ ohpm install | onPrevCallback?: () => void | 用户按下“上一步”按钮时调用的回调以及默认操作。 | function | no | iOS,Android | no | | onDoneCallback?: () => void | 当用户按下“完成”按钮时调用的回调以及默认操作。 | function | no | iOS,Android | yes | +## Known Issues -## 遗留问题 - -- [ ] 暂不支持KeyboardControllerView中onKeyboardMoveStart，onKeyboardMove，onKeyboardMoveInteractive和KeyboardEvents中keyboardWillShow、keyboardWillHide键盘事件的回调：[ issue#1 ](https://github.com/react-native-oh-library/react-native-keyboard-controller/issues/1) - - [ ] 暂不支持KeyboardGestureArea组件：[issue#2 ](https://github.com/react-native-oh-library/react-native-keyboard-controller/issues/2) - - [ ] 暂不支持hook方法useReanimatedFocusedInput，KeyboardController中setFocusTo，KeyboardControllerView中onFocusedInputLayoutChanged、onFocusedInputSelectionChanged，FocusedInputEvents中focusDidSet，KeyboardToolbar中onNextCallback、onPrevCallback关于输入框聚焦的监听方法回调：[issue#3 ](https://github.com/react-native-oh-library/react-native-keyboard-controller/issues/3) - +- [ ] 暂不支持KeyboardControllerView中onKeyboardMoveStart，onKeyboardMove，onKeyboardMoveInteractive和KeyboardEvents中keyboardWillShow、keyboardWillHide键盘事件的回调: [ issue#1 ](https://github.com/react-native-oh-library/react-native-keyboard-controller/issues/1) + - [ ] 暂不支持KeyboardGestureArea组件: [issue#2 ](https://github.com/react-native-oh-library/react-native-keyboard-controller/issues/2) + - [ ] 暂不支持hook方法useReanimatedFocusedInput，KeyboardController中setFocusTo，KeyboardControllerView中onFocusedInputLayoutChanged、onFocusedInputSelectionChanged，FocusedInputEvents中focusDidSet，KeyboardToolbar中onNextCallback、onPrevCallback关于输入框聚焦的监听方法回调: [issue#3 ](https://github.com/react-native-oh-library/react-native-keyboard-controller/issues/3) -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/LICENSE). -- Gitee From dc9edc827c75ef37905226920e18ee7da65cba95 Mon Sep 17 00:00:00 2001 From: ljje Date: Mon, 28 Oct 2024 14:59:52 +0800 Subject: [PATCH 35/53] docs: [Issues: #IB07UG] react-native-lightbox.md --- en/react-native-lightbox.md | 36 ++++++++++++++++-------------------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/en/react-native-lightbox.md b/en/react-native-lightbox.md index 49c8f521..87602410 100644 --- a/en/react-native-lightbox.md +++ b/en/react-native-lightbox.md @@ -1,5 +1,5 @@ -> 模板版本：v0.2.0 +> Template version: v0.2.0

react-native-lightbox

@@ -13,13 +13,11 @@

+> [!TIP] [GitHub address](https://github.com/cbbfcd/react-native-lightbox) +## Installation and Usage -> [!TIP] [Github 地址](https://github.com/cbbfcd/react-native-lightbox) - -## 安装与使用 - -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -37,7 +35,7 @@ yarn add react-native-lightbox-v2@0.9.0 -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```ts import React, { useState } from 'react'; @@ -158,20 +156,18 @@ const styles = StyleSheet.create({ ``` +## Constraints -## 约束与限制 +### Compatibility +This document is verified based on the following versions: -### 兼容性 -本文档内容基于以下版本验证通过： - -1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; +1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; -## 属性 -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +## Properties +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. +> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. 该库为UI组件库，通过配置属性标签，实现对应的功能。 @@ -204,11 +200,11 @@ const styles = StyleSheet.create({ | **`useNativeDriver`** | 是否使用本机驱动程序，默认为 `false`| `bool` |no|all | yes | | **`springConfig`** | [`Animated.spring`](https://facebook.github.io/react-native/docs/animations.html) 配置， 默认为 `{ tension: 30, friction: 7 }`。| `object` |no|all | yes | -## 遗留问题 +## Known Issues -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/cbbfcd/react-native-lightbox/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/cbbfcd/react-native-lightbox/blob/master/LICENSE). \ No newline at end of file -- Gitee From 9ab220cdc0b99b0f7900b2730728a0012ed7727f Mon Sep 17 00:00:00 2001 From: ljje Date: Mon, 28 Oct 2024 15:00:00 +0800 Subject: [PATCH 36/53] docs: [Issues: #IB07UG] react-native-marquee-ab.md --- en/react-native-marquee-ab.md | 43 +++++++++++++++++------------------ 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/en/react-native-marquee-ab.md b/en/react-native-marquee-ab.md index 196fecb2..26269871 100644 --- a/en/react-native-marquee-ab.md +++ b/en/react-native-marquee-ab.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-marquee-ab

@@ -12,12 +12,11 @@

+> [!TIP] [GitHub address](https://github.com/ZhangTaoK/react-native-marquee-ab) -> [!TIP] [Github 地址](https://github.com/ZhangTaoK/react-native-marquee-ab) +## Installation and Usage -## 安装与使用 - -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -35,9 +34,9 @@ yarn add react-native-marquee-ab@1.2.6 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```jsx import React, { Component } from 'react'; @@ -56,9 +55,9 @@ export default class TestPage extends Component { [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. **MarqueeHorizontal props** @@ -133,12 +132,12 @@ export default class TestPage extends Component { | value | 文本显示 | string | yes | iOS/Android | yes | | [object] | 可随意添加数据供自己特殊需求使用 | [object] | no | iOS/Android | yes | -## 遗留问题 +## Known Issues - [ ] MarqueeHorizontal的reverse属性在HarmonyOS上只有第一次修改会触发生效，而原库在iOS上该属性已经失效。未实现HarmonyOS化 问题[issue#58](https://github.com/ZhangTaoK/react-native-marquee-ab/issues/58) -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://choosealicense.com/licenses/mit/) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://choosealicense.com/licenses/mit/). -- Gitee From 22642d8bed0a27f0a26f4c6734bb3216934d648c Mon Sep 17 00:00:00 2001 From: ljje Date: Mon, 28 Oct 2024 15:00:09 +0800 Subject: [PATCH 37/53] docs: [Issues: #IB07UG] react-native-multi-slider.md --- en/react-native-multi-slider.md | 146 +++++++++++++++----------------- 1 file changed, 69 insertions(+), 77 deletions(-) diff --git a/en/react-native-multi-slider.md b/en/react-native-multi-slider.md index d71ec691..812a0a61 100644 --- a/en/react-native-multi-slider.md +++ b/en/react-native-multi-slider.md @@ -1,5 +1,5 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

@ptomasroos/react-native-multi-slider

@@ -14,16 +14,15 @@

+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-multi-slider) -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-multi-slider) +## Installation and Usage -## 安装与使用 +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-tpl/react-native-multi-slider Releases](https://github.com/react-native-oh-library/react-native-multi-slider/releases). -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-multi-slider Releases](https://github.com/react-native-oh-library/react-native-multi-slider/releases)，并下载适用版本的 tgz 包。 +Go to the project directory and execute the following instruction: -进入到工程目录并输入以下命令： - -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -41,9 +40,9 @@ yarn add @react-native-oh-tpl/react-native-multi-slider@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import React from 'react'; @@ -149,7 +148,6 @@ export default function MultiSliderDemo() { let testRef = React.useRef(null); let [currentTestId, setCurrentTestId] = React.useState(''); - // 滑动指标配置 const touchDimensionsConfig = { height: 60, width: 60, @@ -157,22 +155,16 @@ export default function MultiSliderDemo() { slipDisplacement: 200, }; - // 当值开始变化时回调 - const onValuesChangeStart = () => Alert.alert('Success', '值开始变化时回调'); + const onValuesChangeStart = () => Alert.alert('Success', 'Callback when the value starts to change'); - // 值改变时回调 - const onValuesChange = () => Alert.alert('Success', '值改变时回调'); + const onValuesChange = () => Alert.alert('Success', 'Callback when value changes'); - // 当值停止变化时回调 - const onValuesChangeFinish = () => Alert.alert('Success', '值停止变化时回调'); + const onValuesChangeFinish = () => Alert.alert('Success', 'Callback when the value stops changing'); - // 第一个光标切换时回调 - const onToggleOne = () => Alert.alert('Success', '第一个光标切换回调'); + const onToggleOne = () => Alert.alert('Success', 'The first cursor switch callback'); - // 第二个光标切换时回调 - const onToggleTwo = () => Alert.alert('Success', '第二个光标切换回调'); + const onToggleTwo = () => Alert.alert('Success', 'Second cursor switch callback'); - // 获取绑定的testID const getCurrentTestId = () => { const testId = testRef.current?.props.testID || ''; setCurrentTestId(testId); @@ -181,42 +173,42 @@ export default function MultiSliderDemo() { return ( - MultiSlider功能验证 + MultiSlider feature validation - values（设置values，1和6） + Values (set values, 1 and 6) - onValuesChangeStart（值开始变化触发回调） + OnValuesChangeStart (triggering callback when value starts to change) - onValuesChange（值改变时回调触发回调） + OnValuesChange (callback triggered when value changes) - onValuesChangeFinish（当值停止变化时回调） + OnValuesChangeFinish (callback when value stops changing) - sliderLength（滑块长度{100}） + sliderLength（Slide length{100}） - touchDimensions（滑动指标borderRadius 50） + TouchDimensions (sliding indicator borderRadius 50) - enableLabel（开启自定义标签） + EnableLabel (enable custom labels) } /> - customMarker（自定义光标） + CustomMarker (custom cursor) customMarkerLeft/Right - 自定义左右光标：默认未启用 + Custom left and right cursor: not enabled by default } @@ -224,7 +216,7 @@ export default function MultiSliderDemo() { /> isMarkersSeparated - 自定义左右光标：启用 + Customize left and right cursor: Enable } /> - min（滑块可用最小值3） + Min (slider can use a minimum value of 3) - max（滑块可用最大值8） + Max (maximum available slider value of 8) - step（滑块步长5） + Step (slider step size 5) - optionsArray（节点标记） + OptionsArray (Node Tag) - containerStyle（滑块容器样式） + ContainerStyle (slider container style) - trackStyle（轨道样式：默认） + TrackStyle (default track style) - selectedStyle（轨道样式：滑过后） + SelectedStyle (track style: after sliding) - unselectedStyle（轨道样式：未滑过） + UnselectdStyle (track style: not slid over) - markerContainerStyle（光标容器样式） + MarkerContainerStyle (cursor container style) - markerStyle（光标样式） + MarkerStyle (cursor style) - pressedMarkerStyle（接触光标后的样式） + PressedMarkerStyle (the style after touching the cursor) - valuePrefix（值的前缀 b） + Valueprefix (value prefix b) - valueSuffix（值的后缀 a） + ValueSuffix (suffix a for values) - enabledOne（禁用第一个光标） + EnabledOne (disable the first cursor) - enabledTwo（禁用第二个光标） + EnabledTwo (disable the second cursor) stepsAs - 自定义步骤标签，默认展示 + Customize step labels, default display showStepLabels - 隐藏/显示自定义步骤标签，这里隐藏 + Hide/Show Custom Step Tags, Hide Here - showStepMarkers（显示步骤对应的刻度点） + ShowStepMarkers (display the scale points corresponding to the steps) onToggleOne - 点击第一个光标回调 + Click on the first cursor to call back onToggleTwo - 点击第二个光标回调 + Click on the second cursor to call back allowOverlap - 允许/禁止光标重叠，默认禁止，这里允许 + Allow/prohibit cursor overlap, default prohibited, allowed here - snapped（步进式移动光标） + Snapped (Step by Step Moving cursor) - smoothSnapped（跳转最近节点） + SmoothSnapped (jump to nearest node) - vertical（垂直方向） + Vertical (vertical direction) - markerOffsetX（横向偏移20） + MarkerOffsetX (lateral offset of 20) - markerOffsetY（纵向偏移20） + MarkerOffsetY (vertical offset of 20) - markerSize（光标与边缘的距离） + MarkerSize (distance between cursor and edge) minMarkerOverlapDistance - 避免大光标重叠，间隔100 + Avoid large cursor overlap, with an interval of 100 minMarkerOverlapStepDistance - 避免大光标重叠，间隔2步 + Avoid overlapping large cursor with an interval of 2 steps - imageBackgroundSource（背景图片） + ImageContextSource (Background Image) - testID（设置testID） + TestID (Set testID) - {currentTestId || '点击获取testID'} + {currentTestId || 'Click to obtain testID'} @@ -467,23 +459,23 @@ const styles = StyleSheet.create({ }); ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-multi-slider Releases](https://github.com/react-native-oh-library/react-native-multi-slider/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-multi-slider Releases](https://github.com/react-native-oh-library/react-native-multi-slider/releases) -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: -1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; +1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; -## 属性 +## Properties -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。遗留问题 +> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.Known Issues | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------------- | ------------------------------------------------------------ | ----------------- | -------- | -------- | ----------------- | @@ -535,12 +527,12 @@ const styles = StyleSheet.create({ | imageBackgroundSource | Specifies the source required for the ImageBackground | string | NO | All | YES | | testID | Used to locate this view in end-to-end tests | string | NO | All | YES | -## 遗留问题 +## Known Issues -## 其他 +## Others -## 开源协议 +## License -本项目基于[The MIT License (MIT)](https://github.com/ptomasroos/react-native-multi-slider/blob/master/LICENSE)，请自由地享受和参与开源。 +This project is licensed under[The MIT License (MIT)](https://github.com/ptomasroos/react-native-multi-slider/blob/master/LICENSE)，请自由地享受和参与开源。 \ No newline at end of file -- Gitee From b1f9fbac9f77c618a580766be30b8e137ab86e90 Mon Sep 17 00:00:00 2001 From: ljje Date: Mon, 28 Oct 2024 15:00:17 +0800 Subject: [PATCH 38/53] docs: [Issues: #IB07UG] react-native-nfc-manager.md --- en/react-native-nfc-manager.md | 92 ++++++++++++++++------------------ 1 file changed, 44 insertions(+), 48 deletions(-) diff --git a/en/react-native-nfc-manager.md b/en/react-native-nfc-manager.md index 7e2c0cb9..da470639 100644 --- a/en/react-native-nfc-manager.md +++ b/en/react-native-nfc-manager.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-nfc-manager

@@ -12,15 +12,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-nfc-manager) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-nfc-manager) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-nfc-manager Releases](https://github.com/react-native-oh-library/react-native-nfc-manager/releases)，并下载适用版本的 tgz 包。 +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-tpl/react-native-nfc-manager Releases](https://github.com/react-native-oh-library/react-native-nfc-manager/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: -> [!TIP] #处替换为tgz包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). #### **npm** @@ -34,11 +34,11 @@ npm install @react-native-oh-tpl/react-native-nfc-manager@file:# yarn add @react-native-oh-tpl/react-native-nfc-manager@file:# ``` -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!TIP] 使用时 import 的库名不变。 +> [!TIP] The name of the imported repository remains unchanged. -``` +```tsx import React from 'react'; import {View, Text, TouchableOpacity, StyleSheet} from 'react-native'; import NfcManager, {NfcTech} from 'react-native-nfc-manager'; @@ -82,18 +82,18 @@ const styles = StyleSheet.create({ export default App; ``` -## 使用 Codegen +## Use Codegen -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/zh-cn/codegen.md). ## Link -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. ``` -在工程根目录的 oh-package.json 添加 overrides字段 +Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project { ... "overrides": { @@ -107,7 +107,7 @@ export default App; 本库主要用于操作及管理NFC Tag，提供后台读卡和前台应用优先分发两种读卡模式。后台读卡是指不需要打开应用程序，电子设备通过NFC读取标签卡片后，根据标签卡片的类型匹配到一个或多个应用程序。如果仅匹配到一个，则直接拉起应用程序的读卡页面；如果是多个则弹出应用选择器，让用户选择指定的读卡应用。前台读卡是指提前打开应用程序，并进入对应的NFC读卡页面后读卡，只会把读到的标签卡片信息分发给前台应用程序。 ### 后台读卡方式的声明 -**1.应用程序需要支持后台读卡时，需要在应用的属性配置文件中，声明与NFC相关的属性值。比如，在entry/src/main/module.json5文件中，声明下面属性值：** +**1.应用程序需要支持后台读卡时，需要在应用的属性配置文件中，声明与NFC相关的属性值。比如，在entry/src/main/module.json5文件中，声明下面属性值: ** ``` { "module": { @@ -148,7 +148,7 @@ export default App; ``` **2.在对相关Tag类型卡片进行读写之前，必须先获取TagInfo相关属性值，以确认设备读取到的Tag卡片支持哪些技术类型。可以将以下内容添加到EntryAbility** -``` +```tsx import {RNAbility} from 'rnoh'; import Want from '@ohos.app.ability.Want'; import { RNNfcManagerModule } from '@react-native-oh-tpl/react-native-nfc-manager'; @@ -186,18 +186,15 @@ export default class EntryAbility extends RNAbility { ``` -### 2.引入原生端代码 +### 2. Introducing Native Code -目前有两种方法： +Currently, two methods are available: -1. 通过 har 包引入。 -2. 直接链接源码。 +Method 1 (recommended): Use the HAR file. -方法一：通过 har 包引入 (推荐) +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ``` "dependencies": { @@ -206,22 +203,22 @@ export default class EntryAbility extends RNAbility { } ``` -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ``` cd entry ohpm install ``` -方法二：直接链接源码 +Method 2: Directly link to the source code. -> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3.在 ArkTs 侧引入 RNNfcManagerPackage +### 3. Introducing RNNfcManagerPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -235,29 +232,29 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4. Running -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ``` cd entry ohpm install ``` -然后编译、运行即可。 +Then build and run the code. -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-nfc-manager Releases](https://github.com/react-native-oh-library/react-native-nfc-manager/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-nfc-manager Releases](https://github.com/react-native-oh-library/react-native-nfc-manager/releases) -### 权限要求 -打开 `entry/src/main/module.json5`，添加以下权限配置 +### Permission Requirements +Open the `entry/src/main/module.json5` file and add the following code: ``` "requestPermissions": [ @@ -270,7 +267,7 @@ ohpm install ## Nfc Compatibility -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | @@ -403,7 +400,7 @@ ohpm install | ---- | ----------- | ---- | -------- | -------- | ------------------ | | formatNdef | Format tags as NDEF tags and write NDEF messages into NDEF tags | function | NO | Android | yes | -## 属性 +## Properties **RegisterTagEventOpts** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -437,7 +434,7 @@ ohpm install | felica | NFC A type Tag object, through which the felica technology type Tag can be accessed | enum | no | iOS | no | | NdefFormatable | NdefFormatable represents an NFC tag that has not yet been formatted as NDEF | enum | no | Android | yes | -## 返回值 +## Return value **NdefStatus** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -462,12 +459,11 @@ ohpm install | type | This attribute can be a byte array (number []) or a string, depending on the value of the TNF field | number[] | NO | iOS/Android | yes | | payload | Payload is the actual data portion recorded by NDEF | number[] | NO | iOS/Android | yes | -## 遗留问题 - +## Known Issues -## 其他 +## Others 本库是一个为 React Native 开发者提供的 NFC（近场通信）管理库，它允许开发者在 React Native 应用中轻松集成 NFC 功能。这个库支持 iOS 、 Android 和HarmonyOS NEXT平台,使得开发者可以跨平台地实现 NFC 相关的功能，如读取和写入 NFC 标签、进行智能卡模拟等。因平台不同，iOS 、Android 和HarmonyOS NEXT在NFC（近场通信）技术中对标签和协议类型存在兼容性。本库的设计考虑到了Android 和HarmonyOS NEXT兼容性较高，核心功能在两个平台上都能实现，并且表现一致。该库提供了多种 NFC 技术的支持，包括但不限于 NDEF、NfcA、IsoDep 和 NfcV 等。 -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-nfc-manager/blob/main/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-nfc-manager/blob/main/LICENSE). -- Gitee From afad436b65a59c3ef87faee3eac18b3ef353c500 Mon Sep 17 00:00:00 2001 From: ljje Date: Mon, 28 Oct 2024 15:00:25 +0800 Subject: [PATCH 39/53] docs: [Issues: #IB07UG] react-native-orientation-locker.md --- en/react-native-orientation-locker.md | 126 +++++++++++--------------- 1 file changed, 54 insertions(+), 72 deletions(-) diff --git a/en/react-native-orientation-locker.md b/en/react-native-orientation-locker.md index 95009e78..a4c86731 100644 --- a/en/react-native-orientation-locker.md +++ b/en/react-native-orientation-locker.md @@ -1,5 +1,5 @@ -> 模板版本：v0.2.1 +> Template version: v0.2.1

react-native-orientation-locker

@@ -13,15 +13,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-orientation-locker) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-orientation-locker) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-orientation-locker Releases](https://github.com/react-native-oh-library/react-native-orientation-locker/releases)，并下载适用版本的 tgz 包。 +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-library/react-native-orientation-locker Releases](https://github.com/react-native-oh-library/react-native-orientation-locker/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: ->[!TIP] # 处替换为 tgz 包的路径 +>[!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -39,9 +39,9 @@ yarn add @react-native-oh-tpl/react-native-orientation-locker@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: ->[!WARNING] 使用时 import 的库名不变。 +>[!WARNING] The name of the imported repository remains unchanged. ```tsx @@ -82,58 +82,44 @@ export function OrientationLockerExample() { }; useEffect(() => { - // 开启方向变化的监听 getOrientationInt(); }, []); - - //获取方向 const getOrientationInt = () => { Orientation.getOrientation((orientation: string) => { updateOrientation(orientation); if (orientation) { - Alert.alert(`当前屏幕方向为${orientation}`); + Alert.alert(`The current screen orientation is${orientation}`); } else { - Alert.alert('获取当前屏幕方向失败'); + Alert.alert('Failed to obtain the current screen orientation'); } }); }; - // 锁定方向为纵向（竖屏） const setLockToPortrait = () => { Orientation.lockToPortrait(); }; - // 锁定方向为横向（横屏） const setLockToLandscape = () => { Orientation.lockToLandscape(); }; - // 锁定方向为横向，并且是向左旋转的方向 const setLockToLandscapeLeft = () => { Orientation.lockToLandscapeLeft(); }; - // 锁定方向为横向，并且是向右旋转的方向 const setLockToLandscapeRight = () => { Orientation.lockToLandscapeRight(); }; - // 解除方向的锁定，允许自由旋转 const unlockAllOrientations = () => { Orientation.unlockAllOrientations(); }; - - // 锁定上下的方向 const lockToPortraitUpsideDown = () => { Orientation.lockToPortraitUpsideDown(); }; - - // 锁定除了上下的所有方向 const lockToAllOrientationsButUpsideDown = () => { Orientation.lockToAllOrientationsButUpsideDown(); }; - // 添加监听a const addTisten = () => { Orientation.addDeviceOrientationListener(updateDeviceOrientation); }; - // 取消监听 const cancelAddTisten = () => { Orientation.removeDeviceOrientationListener(updateDeviceOrientation); }; @@ -144,33 +130,33 @@ export function OrientationLockerExample() { - 锁定上下的方向 + Lock the up and down direction - 锁定除了上下的所有方向 + Lock all directions except for up and down - 锁定当前屏幕为竖屏 + Lock the current screen to portrait mode - 锁定当前屏幕为横屏 + Lock the current screen to landscape mode - 锁定当前屏幕为横屏,左旋转 + Lock the current screen to landscape and rotate it to the left - 锁定当前屏幕为横屏,右旋转 + Lock the current screen to landscape and rotate it to the right - 解锁当前屏幕旋转锁定 + Unlock the current screen rotation lock - 添加监听 + Add monitoring - 取消监听 + Cancel monitoring ); @@ -209,16 +195,15 @@ const styles = StyleSheet.create({ }, }); - ``` ## Link -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -## 在工程根目录的 `oh-package.json5` 添加 `overrides`字段 +## Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -229,40 +214,37 @@ const styles = StyleSheet.create({ } ``` -### 2.引入原生端代码 - -目前有两种方法： +### 2. Introducing Native Code -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +Currently, two methods are available: -方法一：通过 har 包引入 +Method 1 (recommended): Use the HAR file. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-orientation-locker":"file：../../node_modules/@react-native-oh-tpl/react-native-orientation-locker/harmony/orientation_locker.har" + "@react-native-oh-tpl/react-native-orientation-locker":"file: ../../node_modules/@react-native-oh-tpl/react-native-orientation-locker/harmony/orientation_locker.har" } ``` -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ```bash cd entry ohpm install ``` -方法二：直接链接源码 +Method 2: Directly link to the source code. > [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -271,16 +253,16 @@ ohpm install } ``` -打开终端，执行： +run the following instruction on the terminal: ```bash cd entry ohpm install --no-link ``` -### 3.在 ArkTs 侧引入 RNOrientationLockerPackage +### 3. Introducing RNOrientationLockerPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -293,38 +275,38 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4. Running -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ```bash cd entry ohpm install ``` -然后编译、运行即可。 +Then build and run the code. -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-orientation-locker Releases](https://github.com/react-native-oh-library/react-native-orientation-locker/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-library/react-native-orientation-locker Releases](https://github.com/react-native-oh-library/react-native-orientation-locker/releases) -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: -1. RNOH: 0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; +1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; ## API -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -详情请见[react-native-orientation-locker](https://github.com/react-native-oh-library/react-native-orientation-locker) +For details, see [react-native-orientation-locker](https://github.com/react-native-oh-library/react-native-orientation-locker) | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | ---------------------------------------- | ------ | ------------------------ | ---------------- | ----------------- | @@ -338,11 +320,11 @@ ohpm install ## Events -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -详情请见[react-native-orientation-locker](https://github.com/react-native-oh-library/react-native-orientation-locker) +For details, see [react-native-orientation-locker](https://github.com/react-native-oh-library/react-native-orientation-locker) | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | ---------------------------------------- | ------ | -------- | ----------- | ----------------- | @@ -354,9 +336,9 @@ ohpm install | removeLockListener | | callback | No | IOS/Android | yes | | removeAllListeners | | callback | No | IOS/Android | yes | -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/wonday/react-native-orientation-locker/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/wonday/react-native-orientation-locker/blob/master/LICENSE). \ No newline at end of file -- Gitee From ec9585b6461324c8869ddc76ae6ff4984731c8cc Mon Sep 17 00:00:00 2001 From: ljje Date: Mon, 28 Oct 2024 15:00:33 +0800 Subject: [PATCH 40/53] docs: [Issues: #IB07UG] react-native-orientation.md --- en/react-native-orientation.md | 201 +++++++++++++++++---------------- 1 file changed, 103 insertions(+), 98 deletions(-) diff --git a/en/react-native-orientation.md b/en/react-native-orientation.md index f90dbd47..b6ec70ff 100644 --- a/en/react-native-orientation.md +++ b/en/react-native-orientation.md @@ -1,5 +1,6 @@ -> 模板版本：v0.2.2 + +> Template version: v0.2.2

react-native-orientation

@@ -11,22 +12,21 @@ License -

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-orientation) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-orientation) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-orientation Releases](https://github.com/react-native-oh-library/react-native-orientation/releases)，并下载适用版本的 tgz 包。 +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-library/react-native-orientation Releases](https://github.com/react-native-oh-library/react-native-orientation/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: ->[!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). -#### npm +#### npm ```bash npm install @react-native-oh-tpl/react-native-orientation@file:# @@ -40,74 +40,64 @@ yarn add @react-native-oh-tpl/react-native-orientation@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: ->[!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```tsx - -import Orientation from 'react-native-orientation'; -import {Alert, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; -import {useEffect, useState} from 'react'; +import Orientation from "react-native-orientation"; +import { Alert, StyleSheet, Text, TouchableOpacity, View } from "react-native"; +import { useEffect, useState } from "react"; export default function OrientationDemo() { const [orientation, setOrientation] = useState(); const [SpecificOrientation, setSpecificOrientation] = useState(); const updateOrientation = (orientation: string) => { - console.info('orientation', orientation); + console.info("orientation", orientation); setOrientation(orientation); }; const UpdateSpecificOrientation = (SpecificOrientation: string) => { - console.info('SpecificOrientation', SpecificOrientation); + console.info("SpecificOrientation", SpecificOrientation); setSpecificOrientation(SpecificOrientation); }; useEffect(() => { - // 开启方向变化的监听 Orientation.addOrientationListener(updateOrientation); Orientation.addSpecificOrientationListener(UpdateSpecificOrientation); return () => { - // 移除方向变化的监听 Orientation.removeOrientationListener(updateOrientation); Orientation.removeSpecificOrientationListener(UpdateSpecificOrientation); }; }, []); - // 获取方向 const getOrientationInt = () => { Orientation.getOrientation((err: string, orientation: string) => { if (orientation) { - Alert.alert(`当前屏幕方向为${orientation}`); + Alert.alert(`The current screen orientation is${orientation}`); } else { Alert.alert(err); } }); }; - // 获取具体方向 const getSpecificOrientationInt = () => { Orientation.getSpecificOrientation((err: string, orientation: string) => { if (orientation) { - Alert.alert(`当前屏幕方向为${orientation}`); + Alert.alert(`The current screen orientation is${orientation}`); } else { Alert.alert(err); } }); }; - // 锁定方向为纵向（竖屏） const setLockToPortrait = () => { Orientation.lockToPortrait(); }; - // 锁定方向为横向（横屏） const setLockToLandscape = () => { Orientation.lockToLandscape(); }; - // 锁定方向为横向，并且是向左旋转的方向 const setLockToLandscapeLeft = () => { Orientation.lockToLandscapeLeft(); }; - // 锁定方向为横向，并且是向右旋转的方向 const setLockToLandscapeRight = () => { Orientation.lockToLandscapeRight(); }; - // 解除方向的锁定，允许自由旋转 const unlockAllOrientations = () => { Orientation.unlockAllOrientations(); }; @@ -116,27 +106,42 @@ export default function OrientationDemo() { {`Current Orientation: ${orientation}`} {`Current SpecificOrientation: ${SpecificOrientation}`} - 获取当前屏幕的方向 + + Get the current screen orientation + - 获取当前屏幕具体的方向 + style={styles.button} + > + + Get the specific direction of the current screen + - 锁定当前屏幕为竖屏 + + Lock the current screen to portrait mode + - 锁定当前屏幕为横屏 + + Lock the current screen to landscape mode + - 锁定当前屏幕为横屏,左旋转 + + Lock the current screen to landscape and rotate it to the left + - 锁定当前屏幕为横屏,右旋转 + + Lock the current screen to landscape and rotate it to the right + - 解锁当前屏幕旋转锁定 + + Unlock the current screen rotation lock + ); @@ -145,48 +150,48 @@ export default function OrientationDemo() { const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: 'flex-start', - alignItems: 'center', - backgroundColor: '#F5FCFF', + justifyContent: "flex-start", + alignItems: "center", + backgroundColor: "#F5FCFF", marginTop: 20, }, welcome: { fontSize: 20, - textAlign: 'center', + textAlign: "center", margin: 10, }, instructions: { - textAlign: 'center', - color: '#eeeeee', + textAlign: "center", + color: "#eeeeee", marginBottom: 0, }, buttonContainer: { flex: 0, - flexDirection: 'row', - justifyContent: 'space-around', + flexDirection: "row", + justifyContent: "space-around", }, button: { padding: 5, margin: 5, borderWidth: 1, - borderColor: 'white', + borderColor: "white", borderRadius: 3, - backgroundColor: 'grey', + backgroundColor: "grey", }, }); +``` +## Use Codegen -``` -## 使用 Codegen -本库已经适配了 Codegen ，在使用前需要主动执行生成三方库桥接代码，详细请参考 [Codegen 文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/codegen.md)。 +If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/zh-cn/codegen.md). ## Link -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 在工程根目录的 `oh-package.json5` 添加 overrides字段 +### Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -196,18 +201,16 @@ const styles = StyleSheet.create({ } } ``` -### 2.引入原生端代码 -目前有两种方法： +### 2. Introducing Native Code -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）; -2. 直接链接源码。 +Currently, two methods are available: -方法一：通过 har 包引入 +Method 1 (recommended): Use the HAR file. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -打开 `entry/oh-package.json5`，添加以下依赖 +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { @@ -216,29 +219,29 @@ const styles = StyleSheet.create({ } ``` -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ```bash cd entry ohpm install ``` -方法二：直接链接源码 +Method 2: Directly link to the source code. -> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -打开终端，执行： +run the following instruction on the terminal: ```bash cd entry ohpm install --no-link ``` -### 3.在 ArkTs 侧引入 RNOrientationPackage +### 3. Introducing RNOrientationPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... @@ -252,62 +255,64 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4. Running -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ```bash cd entry ohpm install ``` -然后编译、运行即可。 +Then build and run the code. -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-orientation Releases](https://github.com/react-native-oh-library/react-native-orientation/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-library/react-native-orientation Releases](https://github.com/react-native-oh-library/react-native-orientation/releases) ## API -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -详情请见[react-native-orientation](https://github.com/react-native-oh-library/react-native-orientation) +For details, see [react-native-orientation](https://github.com/react-native-oh-library/react-native-orientation) -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------- | ---------------------------------------- | ------ | -------- | ----------- | ----------------- | -| lockToPortrait | Lock the orientation of the application to portrait (portrait) | function | No | IOS/Android | yes | -| lockToLandscape | Lock the orientation of the application to landscape (landscape) | function | No | IOS/Android | yes | -| lockToLandscapeLeft | Lock the orientation of the app to landscape and rotated to the left | function | No | IOS/Android | yes | -| lockToLandscapeRight | Lock the orientation of the app to landscape and rotated to the right | function | No | IOS/Android | yes | -| unlockAllOrientations | Unlocks the orientation of the app, allowing the device to rotate freely | function | No | IOS/Android | yes | -| getOrientation | Get the direction of the current device | callback | No | IOS/Android | yes | -| getSpecificOrientation | Obtains the direction of the current device | callback | No | IOS/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------- | ------------------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| lockToPortrait | Lock the orientation of the application to portrait (portrait) | function | No | IOS/Android | yes | +| lockToLandscape | Lock the orientation of the application to landscape (landscape) | function | No | IOS/Android | yes | +| lockToLandscapeLeft | Lock the orientation of the app to landscape and rotated to the left | function | No | IOS/Android | yes | +| lockToLandscapeRight | Lock the orientation of the app to landscape and rotated to the right | function | No | IOS/Android | yes | +| unlockAllOrientations | Unlocks the orientation of the app, allowing the device to rotate freely | function | No | IOS/Android | yes | +| getOrientation | Get the direction of the current device | callback | No | IOS/Android | yes | +| getSpecificOrientation | Obtains the direction of the current device | callback | No | IOS/Android | yes | ## Events -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. + +> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. + +For details, see [react-native-orientation](https://github.com/react-native-oh-library/react-native-orientation) -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------------------- | ------------------------------------------------- | -------- | -------- | ----------- | ----------------- | +| addOrientationListener | Enable monitoring of screen orientation changes | callback | No | IOS/Android | yes | +| addSpecificOrientationListener | Start to monitor the change of screen orientation | callback | No | IOS/Android | yes | +| removeOrientationListener | Remove Listen Screen Orientation Change | callback | No | IOS/Android | yes | +| removeSpecificOrientationListener | Remove Monitor Screen Specific Orientation Change | callback | No | IOS/Android | yes | -详情请见[react-native-orientation](https://github.com/react-native-oh-library/react-native-orientation) +## Others -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------- | ---------------------------------------- | ------ | -------- | ----------- | ----------------- | -| addOrientationListener | Enable monitoring of screen orientation changes | callback | No | IOS/Android | yes | -| addSpecificOrientationListener | Start to monitor the change of screen orientation | callback | No | IOS/Android | yes | -| removeOrientationListener | Remove Listen Screen Orientation Change | callback | No | IOS/Android | yes | -| removeSpecificOrientationListener | Remove Monitor Screen Specific Orientation Change | callback | No | IOS/Android | yes | -## 其他 +## License -## 开源协议 +This project is licensed under [ISC License](https://github.com/react-native-oh-library/react-native-orientation/blob/master/LICENSE). -本项目基于 [ISC License](https://github.com/react-native-oh-library/react-native-orientation/blob/master/LICENSE) ，请自由地享受和参与开源。 - \ No newline at end of file + -- Gitee From 111c54588c9c3ba553911544922484d6d5c930a2 Mon Sep 17 00:00:00 2001 From: ljje Date: Mon, 28 Oct 2024 15:00:41 +0800 Subject: [PATCH 41/53] docs: [Issues: #IB07UG] react-native-performance.md --- en/react-native-performance.md | 361 +++++++++++++++++---------------- 1 file changed, 182 insertions(+), 179 deletions(-) diff --git a/en/react-native-performance.md b/en/react-native-performance.md index 2078a664..63d777a6 100644 --- a/en/react-native-performance.md +++ b/en/react-native-performance.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-performance

@@ -13,16 +13,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-performance) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-performance) +## Installation and Usage -## 安装与使用 +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-tpl/react-native-performance Releases](https://github.com/react-native-oh-library/react-native-performance/releases). -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-performance Releases](https://github.com/react-native-oh-library/react-native-performance/releases)，并下载适用版本的 tgz 包。 +Go to the project directory and execute the following instruction: -进入到工程目录并输入以下命令： - -> [!TIP] # 处替换为 tgz 包的路径 +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -40,172 +39,177 @@ yarn add @react-native-oh-tpl/react-native-performance@file:# -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js -import React, { useState,useEffect } from 'react'; +import React, { useState, useEffect } from "react"; import { - ScrollView, StyleSheet, View, Text, Button, Alert, FlatList, + ScrollView, + StyleSheet, + View, + Text, + Button, + Alert, + FlatList, SafeAreaView, StatusBar, - TouchableOpacity -} from 'react-native'; -import performance,{PerformanceObserver,setResourceLoggingEnabled} from '@react-native-oh-tpl/react-native-performance' + TouchableOpacity, +} from "react-native"; +import performance, { + PerformanceObserver, + setResourceLoggingEnabled, +} from "@react-native-oh-tpl/react-native-performance"; export function TestNativePerformance() { - const [result1, setResult1] = React.useState(0) - const [result2, setResult2] = React.useState('') - const [result3, setResult3] = React.useState('') - const [result4, setResult4] = React.useState('') - const [result5, setResult5] = React.useState('') - const [result6, setResult6] = React.useState('') - const [result7, setResult7] = React.useState('') + const [result1, setResult1] = React.useState(0); + const [result2, setResult2] = React.useState(""); + const [result3, setResult3] = React.useState(""); + const [result4, setResult4] = React.useState(""); + const [result5, setResult5] = React.useState(""); + const [result6, setResult6] = React.useState(""); + const [result7, setResult7] = React.useState(""); const handleTimeStampClick1 = () => { - performance.mark('entry'); - let entry=performance.getEntriesByName('entry')[0]; + performance.mark("entry"); + let entry = performance.getEntriesByName("entry")[0]; const timestamp = Date.now() - performance.timeOrigin + entry.startTime; - setResult1(timestamp) - } + setResult1(timestamp); + }; const handleTimeStampClick2 = () => { - performance.mark('myMark'); - performance.measure('myMeasure2', 'myMark'); - let ms=performance.getEntriesByName('myMeasure2'); - setResult2(JSON.stringify(ms)) - } + performance.mark("myMark"); + performance.measure("myMeasure2", "myMark"); + let ms = performance.getEntriesByName("myMeasure2"); + setResult2(JSON.stringify(ms)); + }; const handleTimeStampClick3 = () => { - performance.mark('myMark', { + performance.mark("myMark", { detail: { - screen: 'settings' - } + screen: "settings", + }, }); - performance.measure('myMeasure3', { - start: 'myMark', + performance.measure("myMeasure3", { + start: "myMark", detail: { - category: 'render' - } + category: "render", + }, }); - let ms=performance.getEntriesByName('myMeasure3'); - setResult3(JSON.stringify(ms)) - } + let ms = performance.getEntriesByName("myMeasure3"); + setResult3(JSON.stringify(ms)); + }; const handleTimeStampClick4 = () => { - performance.mark('newTimeMark') - performance.measure('newTime','newTimeMark') + performance.mark("newTimeMark"); + performance.measure("newTime", "newTimeMark"); const measureObserver = new PerformanceObserver((list, observer) => { - let res=[]; + let res = []; list.getEntries().forEach((entry) => { res.push(JSON.stringify(entry)); }); - setResult4(res.join(',')) + setResult4(res.join(",")); }); - measureObserver.observe({ type: 'measure', buffered: true }); - } + measureObserver.observe({ type: "measure", buffered: true }); + }; const handleTimeStampClick5 = async () => { setResourceLoggingEnabled(true); - await fetch('https://www.baidu.com'); - let res=performance.getEntriesByType('resource'); - setResult5(JSON.stringify(res)) - } - const handleTimeStampClick6 =() => { - performance.metric('myMetric', 123); - let res=performance.getEntriesByType('metric'); - setResult6(JSON.stringify(res)) - } - const handleTimeStampClick7 =() => { - let res=performance.getEntriesByType('react-native-mark'); - setResult7(JSON.stringify(res)) - } - - + await fetch("https://www.baidu.com"); + let res = performance.getEntriesByType("resource"); + setResult5(JSON.stringify(res)); + }; + const handleTimeStampClick6 = () => { + performance.metric("myMetric", 123); + let res = performance.getEntriesByType("metric"); + setResult6(JSON.stringify(res)); + }; + const handleTimeStampClick7 = () => { + let res = performance.getEntriesByType("react-native-mark"); + setResult7(JSON.stringify(res)); + }; + return ( - - - + + + + + {"Change the theme object:"} + + + + {" "} + Current topic:{UnistylesRuntime.themeName} The number of times to re + render:{renderCount.current++} + + + {" "} + Colors: {JSON.stringify(theme.colors, null, 2)}{" "} + +