From a3e9a23d3a93dd5a05b50ee5b93890b83f62743b Mon Sep 17 00:00:00 2001 From: zWX1317523 Date: Fri, 25 Oct 2024 14:44:13 +0800 Subject: [PATCH 01/35] =?UTF-8?q?docs:=20=E7=BF=BB=E8=AF=91react-native-qr?= =?UTF-8?q?code-svg=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-qrcode-svg.md | 46 ++++++++++++++++------------------- 1 file changed, 21 insertions(+), 25 deletions(-) diff --git a/en/react-native-qrcode-svg.md b/en/react-native-qrcode-svg.md index 8618af604..eb5dea5c7 100644 --- a/en/react-native-qrcode-svg.md +++ b/en/react-native-qrcode-svg.md @@ -1,5 +1,4 @@ - -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-qrcode-svg

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

-> [!TIP] [Github 地址](https://github.com/awesomejerry/react-native-qrcode-svg) +> [!TIP] [GitHub address](https://github.com/awesomejerry/react-native-qrcode-svg) -## 安装与使用 +## Installation and Usage -进入到工程目录并输入以下命令： - -> [!TIP] # 处替换为 tgz 包的路径 +Go to the project directory and execute the following instruction: @@ -37,10 +34,11 @@ yarn add react-native-qrcode-svg@6.2.0 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: + +> [!WARNING] The name of the imported repository remains unchanged. -> [!WARNING] 使用时 import 的库名不变。 -> [!TIP] 当报错信息为`Property 'TextEncoder' doesn't exist`[解决方案](https://github.com/awesomejerry/react-native-qrcode-svg/issues/199) +> [!TIP] If the error message `Property 'TextEncoder' doesn't exist` is displayed. [solution](https://github.com/awesomejerry/react-native-qrcode-svg/issues/199) ```js @@ -62,23 +60,23 @@ export const SvgDemo = () => { ## Link -本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-svg. 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. -如未引入请参照[@react-native-oh-tpl/react-native-svg-capi 文档的 Link 章节](/zh-cn/react-native-svg-capi.md)进行引入 +If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-svg-capi](/en/react-native-svg-capi.md) to add it to your project. -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -在以下版本验证通过 +This document is verified based on the following versions: -1.RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25; +1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.400; ROM: 3.0.0.25; -## 属性 +## 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. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- | @@ -99,12 +97,10 @@ export const SvgDemo = () => { | `ecl` | Error correction level | string | No | iOS,Android | yes | | `onError(error)` | Callback fired when exception happened during the code generating process | callback | No | iOS,Android | yes | -## 遗留问题 - -## 其他 +## Known Issues -## 开源协议 +## Others -本项目基于 [The MIT License (MIT)](https://github.com/awesomejerry/react-native-qrcode-svg/blob/master/LICENSE) ，请自由地享受和参与开源。 +## License - \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/awesomejerry/react-native-qrcode-svg/blob/master/LICENSE). -- Gitee From 7fe810e6750cd986de9f8efb10027e5cc902c106 Mon Sep 17 00:00:00 2001 From: zWX1317523 Date: Fri, 25 Oct 2024 15:16:20 +0800 Subject: [PATCH 02/35] =?UTF-8?q?docs:=20=E7=BF=BB=E8=AF=91react-native-se?= =?UTF-8?q?ction-list-get-item-layout=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...act-native-section-list-get-item-layout.md | 38 ++++++++++--------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/en/react-native-section-list-get-item-layout.md b/en/react-native-section-list-get-item-layout.md index 4514337ef..5ae4d33bd 100644 --- a/en/react-native-section-list-get-item-layout.md +++ b/en/react-native-section-list-get-item-layout.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-section-list-get-item-layout

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

-> [!tip] [Github 地址](https://github.com/jsoendermann/rn-section-list-get-item-layout) +> [!TIP] [GitHub address](https://github.com/jsoendermann/rn-section-list-get-item-layout) -## 安装与使用 +## Installation and Usage -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -35,7 +35,9 @@ yarn add react-native-section-list-get-item-layout@2.2.3 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: + +> [!WARNING] The name of the imported repository remains unchanged. ```js import sectionListGetItemLayout from "react-native-section-list-get-item-layout"; @@ -65,31 +67,31 @@ class MyComponent extends React.Component { export default MyComponent ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: -1. RNOH：0.72.26; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.300; ROM：3.0.0.25; -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; +1. RNOH: 0.72.26; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.300; ROM: 3.0.0.25; +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; -## API +## APIs -> [!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. -详情见 [rn-section-list-get-item-layout 源库地址](https://github.com/jsoendermann/rn-section-list-get-item-layout) +For details, see [rn-section-list-get-item-layout](https://github.com/jsoendermann/rn-section-list-get-item-layout) | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | | sectionListGetItemLayout({getItemHeight, getSeparatorHeight, getSectionHeaderHeight,getSectionFooterHeight,listHeaderHeight}) | This package provides a function that helps you construct the getItemLayout function for your SectionLists. For an explanation of why this exists, see this post. It's meant to be used like this | function | Yes | All | Yes | -## 遗留问题 +## Known Issues -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/jsoendermann/rn-section-list-get-item-layout/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/jsoendermann/rn-section-list-get-item-layout/blob/master/LICENSE). -- Gitee From 32d6e05a5b17f59da8b9bd86b49eb5f1246fdb53 Mon Sep 17 00:00:00 2001 From: zWX1317523 Date: Fri, 25 Oct 2024 15:24:09 +0800 Subject: [PATCH 03/35] =?UTF-8?q?docs:=20=E7=BF=BB=E8=AF=91react-native-ac?= =?UTF-8?q?tion-button=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-action-button.md | 39 ++++++++++++++++---------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/en/react-native-action-button.md b/en/react-native-action-button.md index f91bb0a14..6dea64d13 100644 --- a/en/react-native-action-button.md +++ b/en/react-native-action-button.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-action-button

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

-> [!TIP] [Github 地址](https://github.com/mastermoo/react-native-action-button) +> [!TIP] [GitHub address](https://github.com/mastermoo/react-native-action-button) -## 安装与使用 +## Installation and Usage -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -34,7 +34,7 @@ yarn add react-native-action-button@2.8.5 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: ```js import React, { Component } from "react"; @@ -81,22 +81,23 @@ const styles = StyleSheet.create({ }, }); ``` -## 约束与限制 -## 兼容性 +## Constraints -在以下版本验证通过 +### Compatibility -1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; -2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; -3. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25; -4. 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; +This document is verified based on the following versions: -## 属性 +1. RNOH: 0.72.11; SDK: OpenHarmony(api11) 4.1.0.53; IDE: DevEco Studio 4.1.3.412; ROM: 2.0.0.52; +2. RNOH: 0.72.13; SDK: HarmonyOS NEXT Developer Preview1; IDE: DevEco Studio 4.1.3.500; ROM: 2.0.0.58; +3. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.400; ROM: 3.0.0.25; +4. 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"列表示该属性在原三方库上支持的平台。 +## Properties -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |----------| -------- | @@ -142,10 +143,10 @@ const styles = StyleSheet.create({ | fixNativeFeedbackRadius | Android: Activate this to fix TouchableNativeFeedback Ripple UI problems | boolean | No | Android | No | | nativeFeedbackRippleColor | Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback | string | No | Android | No | -## 遗留问题 +## Known Issues -## 其他 +## Others -## 开源协议 +## License -本项目基于 [MIT License](https://github.com/mastermoo/react-native-action-button/blob/master/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [MIT License](https://github.com/mastermoo/react-native-action-button/blob/master/LICENSE). -- Gitee From 6a05e5c76d098c08f23076a9deec3d10286aebcf Mon Sep 17 00:00:00 2001 From: zWX1317523 Date: Fri, 25 Oct 2024 16:10:00 +0800 Subject: [PATCH 04/35] =?UTF-8?q?docs:=20=E7=BF=BB=E8=AF=91react-native-do?= =?UTF-8?q?tenv=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-dotenv.md | 46 +++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/en/react-native-dotenv.md b/en/react-native-dotenv.md index 9352f90be..62ae4e8e8 100644 --- a/en/react-native-dotenv.md +++ b/en/react-native-dotenv.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-dotenv

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

-> [!TIP] [Github 地址](https://github.com/goatandsheep/react-native-dotenv) +> [!TIP] [GitHub address](https://github.com/goatandsheep/react-native-dotenv) -## 安装与使用 +## Installation and Usage - - -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -36,9 +34,9 @@ yarn add -D react-native-dotenv@3.4.9 -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: -> [!WARNING] 使用时 import 的库名不变。 +> [!WARNING] The name of the imported repository remains unchanged. ```js import {API_URL, API_TOKEN} from '@env'; @@ -68,9 +66,9 @@ export function TestDotenv() { } ``` -基础配置： +Basic Configuration: -**.babelrc 或 babel.config.js** +**`.babelrc` or `babel.config.js`** ```json { @@ -78,7 +76,7 @@ export function TestDotenv() { } ``` -**.babelrc 或 babel.config.js** +**`.babelrc` or `babel.config.js`** > [!TIP] 如果默认值不适合您项目，这里会列出 Babel 配置的可用选项及其各自的默认值，但如果您使用默认设置，则无需添加它们。 @@ -232,7 +230,7 @@ declare module "@env" { 把所有你的 `.env` 的变量加入这个 module 内。 -最后，在 `tsconfig.json` 文件中添加 `typeRoots` 字段 +Finally, add the `typeRoots` field to the `tsconfig.json` file ```json { @@ -246,7 +244,7 @@ declare module "@env" { } ``` -### 缓存 +### Cache > [!WARNING] 请务必查看这一小节 @@ -261,7 +259,7 @@ declare module "@env" { } ``` -在 babel config 中添加 `api.cache(false)`，例如 +Add `api.cache(false)` to the `babel.config.js` file, for example: ```js // .babel.config.js @@ -274,7 +272,7 @@ module.exports = function (api) { }; ``` -在 `metro.config.js` 中添加 `resetCache: true`，例如 +Add `resetCache: true` to the `metro.config.js` file, for example: ```js // metro.config.js @@ -286,19 +284,19 @@ module.exports = { 更多清除缓存的方法请参考 [react-naitve-dotenv 官方指引](https://github.com/goatandsheep/react-native-dotenv) -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: -1. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.1.430; ROM：3.0.0.26; -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; +1. RNOH: 0.72.27; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.1.430; ROM: 3.0.0.26; +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; -## 遗留问题 +## Known Issues -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/goatandsheep/react-native-dotenv/blob/main/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/goatandsheep/react-native-dotenv/blob/main/LICENSE). -- Gitee From 34cf8a7db3f57d43915e270f5ccbc1bcdde3afa8 Mon Sep 17 00:00:00 2001 From: zWX1317523 Date: Fri, 25 Oct 2024 16:23:43 +0800 Subject: [PATCH 05/35] =?UTF-8?q?docs:=20=E7=BF=BB=E8=AF=91react-native-pd?= =?UTF-8?q?f=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-pdf.md | 98 +++++++++++++++++++++--------------------- 1 file changed, 48 insertions(+), 50 deletions(-) diff --git a/en/react-native-pdf.md b/en/react-native-pdf.md index e3b882cdf..2e005277d 100644 --- a/en/react-native-pdf.md +++ b/en/react-native-pdf.md @@ -1,6 +1,4 @@ - - -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-pdf

@@ -14,13 +12,15 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-pdf) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-pdf) + +## 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-pdf Releases](https://github.com/react-native-oh-library/react-native-pdf/releases). -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-pdf Releases](https://github.com/react-native-oh-library/react-native-pdf/releases)，并下载适用版本的 tgz 包。 +Go to the project directory and execute the following instruction: -进入到工程目录并输入以下命令： +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). @@ -38,9 +38,9 @@ yarn add @react-native-oh-tpl/react-native-pdf@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"; @@ -89,11 +89,11 @@ 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. -### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -104,18 +104,15 @@ const styles = StyleSheet.create({ } ``` -### 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": { @@ -124,22 +121,22 @@ 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](/en/link-source-code.md). -### 3.配置 CMakeLists 和引入 PdfViewPackage +### 3. Configuring CMakeLists and Introducing PdfViewPackage -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: ```diff project(rnapp) @@ -177,7 +174,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" @@ -194,9 +191,9 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4.在 ArkTs 侧引入 RTNPdfView 组件 +### 4. Introducing RTNPdfView Component to ArkTS -找到 **function buildCustomRNComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： +Find `function buildCustomRNComponent()`, which is usually located in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets`, and add the following code: ```diff ... @@ -217,9 +214,9 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ``` -> [!TIP] 本库使用了混合方案，需要添加组件名。 +> [!TIP] If the repository uses a mixed solution, the component name needs to be added. -在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名 +Find the constant `arkTsComponentNames` in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets` and add the component name to the array. ```diff const arkTsComponentNames: Array = [ @@ -230,32 +227,32 @@ const arkTsComponentNames: Array = [ ]; ``` -### 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 -要使用此库，需要使用正确的 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-pdf Releases](https://github.com/react-native-oh-library/react-native-pdf/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-pdf Releases](https://github.com/react-native-oh-library/react-native-pdf/releases) -## 属性 +## 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. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | -------- | ------------- |-------------------| @@ -312,22 +309,23 @@ ohpm install | {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | load pdf from content URI | object | NO | iOS | no | | {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | load pdf from blob URL | object | NO | Android | no | -## 静态方法 +## Static Methods + +> [!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. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------- | ------------- | ----------------- | | setPage | Set the current page of the PDF component. pageNumber is a positive integer. If pageNumber > numberOfPages, current page is not changed. | function(pageNumber) | NO | iOS / Android | no | -## 遗留问题 +## Known Issues - [ ] onLoadComplete 回调函数参数返回目前仅支持 numberOfPages, path参数：[issue#47](https://github.com/react-native-oh-library/react-native-pdf/issues/47) - [ ] 原库部分接口在 HarmonyOS 中没有对应属性及接口处理相关逻辑: [issue#48](https://github.com/react-native-oh-library/react-native-pdf/issues/48) -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/wonday/react-native-pdf/blob/master/LICENSE) ，请自由地享受和参与开源。 +## Others - +## License +This project is licensed under [The MIT License (MIT)](https://github.com/wonday/react-native-pdf/blob/master/LICENSE). -- Gitee From e953190e52fa2e10bfd6e042e622635905ec2912 Mon Sep 17 00:00:00 2001 From: zWX1317523 Date: Fri, 25 Oct 2024 16:36:08 +0800 Subject: [PATCH 06/35] =?UTF-8?q?docs:=20=E7=BF=BB=E8=AF=91react-native-re?= =?UTF-8?q?animated-carousel=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-reanimated-carousel.md | 36 ++++++++++++-------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/en/react-native-reanimated-carousel.md b/en/react-native-reanimated-carousel.md index cdde76ca4..8463b93df 100644 --- a/en/react-native-reanimated-carousel.md +++ b/en/react-native-reanimated-carousel.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-reanimated-carousel

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

-> [!TIP] [Github 地址](https://github.com/dohooo/react-native-reanimated-carousel) +> [!TIP] [GitHub address](https://github.com/dohooo/react-native-reanimated-carousel) -## 安装与使用 +## Installation and Usage -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -34,9 +34,7 @@ yarn add react-native-reanimated-carousel@3.5.1 -下面的代码展示了这个库的基本使用场景： - -> [!TIP] 本示例依赖 react-native-gesture-handler、react-native-reanimated 库，参照[@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)进行引入。 +The following code shows the basic use scenario of the repository: ```ts import React, { useState, useRef } from "react"; @@ -176,23 +174,23 @@ const styles = StyleSheet.create({ ## Link -本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-gesture-handler、@react-native-oh-tpl/react-native-reanimated 的原生端代码，如已在鸿蒙工程中引入过这两个库，则无需再次引入，可跳过本章节步骤，直接使用。 +The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-gesture-handler and @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. -如未引入请参照[@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)进行引入 +If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-gesture-handler](/en/react-native-gesture-handler.md) and [@react-native-oh-tpl/react-native-reanimated](/en/react-native-reanimated.md) to add it to your project. -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: 1. RNOH: 0.72.29; SDK: HarmonyOS-Next-DB6 5.0.0.61; IDE: DevEco Studio 5.0.3.706; ROM: NEXT.0.0.61; -## 属性 +## 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. ### Basic Props @@ -259,10 +257,10 @@ const styles = StyleSheet.create({ | scrollTo | Use count to scroll to a position where relative to the current position, scrollTo({count:-2}) is equivalent to prev(2), scrollTo({count:2}) is equivalent to next(2). And also can jump to specific position, e.g. scrollTo({index:2,animated:false}) | no | | ({ index: number, count: number, animated: boolean, onFinished?: () => void }) => void | All | yes | | getCurrentIndex | Get current item index | no | | ()=>number | All | yes | -## 遗留问题 +## Known Issues -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/LICENSE). -- Gitee From 1f0bab1cbafcd37a6579f75afea3ec5b80e9db9c Mon Sep 17 00:00:00 2001 From: zWX1317523 Date: Fri, 25 Oct 2024 16:43:35 +0800 Subject: [PATCH 07/35] =?UTF-8?q?docs:=20=E7=BF=BB=E8=AF=91react-native-ch?= =?UTF-8?q?eck-box=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-check-box.md | 72 ++++++++++++++++++------------------ 1 file changed, 37 insertions(+), 35 deletions(-) diff --git a/en/react-native-check-box.md b/en/react-native-check-box.md index 617db5fd1..e6601aebb 100644 --- a/en/react-native-check-box.md +++ b/en/react-native-check-box.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-check-box

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

-> [!TIP] [Github 地址](https://github.com/crazycodeboy/react-native-check-box) +> [!TIP] [GitHub address](https://github.com/crazycodeboy/react-native-check-box) -## 安装与使用 +## Installation and Usage -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -32,7 +32,7 @@ yarn add react-native-check-box@2.1.7 ``` -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: ```js import React, {Component} from 'react'; @@ -73,40 +73,42 @@ const styles = StyleSheet.create({ }); ``` -## 兼容性 +## Constraints -在以下版本验证通过 +### Compatibility -1. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25; -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; +This document is verified based on the following versions: -## 属性 +1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400; ROM: 3.0.0.25; +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"列表示该属性在原三方库上支持的平台。 +## Properties -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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. | Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------- | ----------- | -------- | -| style | Custom style checkbox | ViewPropTypes.style | No | Android、IOS | Yes | -| leftText | Custom left Text | PropTypes.string | No | Android、IOS | Yes | -| leftTextStyle | Custom left Text style | Text.propTypes.style | No | Android、IOS | Yes | -| rightText | Custom right Text | PropTypes.string | No | Android、IOS | Yes | -| rightTextView | Custom right TextView | PropTypes.element | No | Android、IOS | Yes | -| rightTextStyle | Custom right Text style | Text.propTypes.style | No | Android、IOS | Yes | -| checkedImage | Custom checked Image | PropTypes.element | No | Android、IOS | Yes | -| unCheckedImage | Custom unchecked Image | PropTypes.element | No | Android、IOS | Yes | -| isChecked | checkbox checked state | PropTypes.bool | Yes | Android、IOS | Yes | -| onClick | callback function | PropTypes.func.isRequired | Yes | Android、IOS | Yes | -| disabled | Disable the checkbox button | PropTypes.bool | No | Android、IOS | Yes | -| checkBoxColor | Tint color of the checkbox image (this props is for both checked and unchecked state) | PropTypes.string | Yes | Android、IOS | Yes | -| checkedCheckBoxColor | Tint color of the checked state checkbox image (this prop will override value of checkBoxColor for checked state) | PropTypes.string | No | Android、IOS | Yes | -| uncheckedCheckBoxColor | Tint color of the unchecked state checkbox image (this prop will override value of checkBoxColor for unchecked state) | PropTypes.string | No | Android、IOS | Yes | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [MIT License](https://github.com/crazycodeboy/react-native-check-box/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +| ---------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------- |-------------| -------- | +| style | Custom style checkbox | ViewPropTypes.style | No | Android IOS | Yes | +| leftText | Custom left Text | PropTypes.string | No | Android IOS | Yes | +| leftTextStyle | Custom left Text style | Text.propTypes.style | No | Android IOS | Yes | +| rightText | Custom right Text | PropTypes.string | No | Android IOS | Yes | +| rightTextView | Custom right TextView | PropTypes.element | No | Android IOS | Yes | +| rightTextStyle | Custom right Text style | Text.propTypes.style | No | Android IOS | Yes | +| checkedImage | Custom checked Image | PropTypes.element | No | Android IOS | Yes | +| unCheckedImage | Custom unchecked Image | PropTypes.element | No | Android IOS | Yes | +| isChecked | checkbox checked state | PropTypes.bool | Yes | Android IOS | Yes | +| onClick | callback function | PropTypes.func.isRequired | Yes | Android IOS | Yes | +| disabled | Disable the checkbox button | PropTypes.bool | No | Android IOS | Yes | +| checkBoxColor | Tint color of the checkbox image (this props is for both checked and unchecked state) | PropTypes.string | Yes | Android IOS | Yes | +| checkedCheckBoxColor | Tint color of the checked state checkbox image (this prop will override value of checkBoxColor for checked state) | PropTypes.string | No | Android IOS | Yes | +| uncheckedCheckBoxColor | Tint color of the unchecked state checkbox image (this prop will override value of checkBoxColor for unchecked state) | PropTypes.string | No | Android IOS | Yes | + +## Known Issues + +## Others + +## License + +This project is licensed under [MIT License](https://github.com/crazycodeboy/react-native-check-box/blob/master/LICENSE). -- Gitee From 76908787e3a3b11a41c2ef53f64614839d73785d Mon Sep 17 00:00:00 2001 From: zWX1317523 Date: Fri, 25 Oct 2024 16:50:15 +0800 Subject: [PATCH 08/35] =?UTF-8?q?docs:=20=E7=BF=BB=E8=AF=91react-native-ke?= =?UTF-8?q?yboard-aware-scroll-view=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-keyboard-aware-scroll-view.md | 45 +++++++++---------- 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/en/react-native-keyboard-aware-scroll-view.md b/en/react-native-keyboard-aware-scroll-view.md index ede718e5d..cd2d30107 100644 --- a/en/react-native-keyboard-aware-scroll-view.md +++ b/en/react-native-keyboard-aware-scroll-view.md @@ -1,5 +1,4 @@ - -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-keyboard-aware-scroll-view

@@ -13,17 +12,17 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-keyboard-aware-scroll-view Releases](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view/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-keyboard-aware-scroll-view Releases](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: - +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). -> [!TIP] # 处替换为 tgz 包的路径 + #### **npm** @@ -39,9 +38,9 @@ yarn add @react-native-oh-tpl/react-native-keyboard-aware-scroll-view@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 React, { useState, useRef } from "react"; @@ -96,21 +95,21 @@ 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-keyboard-aware-scroll-view Releases](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view/releases) +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-keyboard-aware-scroll-view Releases](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view/releases) -## 属性 +## 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. -详情见 [react-native-keyboard-aware-scroll-view 源库地址](https://github.com/APSL/react-native-keyboard-aware-scroll-view) +For details, see [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | @@ -131,15 +130,13 @@ const styles = StyleSheet.create({ | scrollToEnd | Scroll to end with or without animation. | (animated?: bool = true) => void | NO | All | YES | | scrollIntoView | Scrolls an element inside a KeyboardAwareScrollView into view. | (element: React.Element<\*>, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) => { x: number, y: number, animated: boolean } }) => void | NO | All | YES | -## 遗留问题 +## Known Issues - [ ] RN0.72.28版本新架构暂未支持UIManager.viewIsDescendantOf() API，该API功能为：判断组件节点嵌套关系，并在callback中返回boolean类型参数: [issue#12](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view/issues/12) - [ ] 键盘抬起部分生命周期未HarmonyOS化，功能不受影响 问题:[issue#17](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view/issues/17) -## 其他 - -## 开源协议 +## Others -本项目基于 [The MIT License (MIT)](https://github.com/APSL/react-native-keyboard-aware-scroll-view/blob/master/LICENSE) ，请自由地享受和参与开源。 +## License - \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/APSL/react-native-keyboard-aware-scroll-view/blob/master/LICENSE). -- Gitee From d620576833e0fe8f75ac2b8f347e3e3c73b677e2 Mon Sep 17 00:00:00 2001 From: zWX1317523 Date: Fri, 25 Oct 2024 16:57:29 +0800 Subject: [PATCH 09/35] =?UTF-8?q?docs:=20=E7=BF=BB=E8=AF=91react-native-sl?= =?UTF-8?q?ider=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-slider.md | 47 ++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/en/react-native-slider.md b/en/react-native-slider.md index 575c2047f..26ac1bfae 100644 --- a/en/react-native-slider.md +++ b/en/react-native-slider.md @@ -1,5 +1,4 @@ - -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-slider

@@ -13,17 +12,17 @@

-> [!tip] [Github 地址](https://github.com/react-native-oh-library/jeanregisser-react-native-slider/tree/sig) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/jeanregisser-react-native-slider/tree/sig) -## 安装与使用 +## Installation and Usage -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/jeanregisser-react-native-slider Releases](https://github.com/react-native-oh-library/jeanregisser-react-native-slider/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/jeanregisser-react-native-slider Releases](https://github.com/react-native-oh-library/jeanregisser-react-native-slider/releases). -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: - +> [!TIP] Replace the content with the path of the .tgz package at the comment sign (#). -> [!TIP] # 处替换为 tgz 包的路径 + #### **npm** @@ -39,9 +38,9 @@ yarn add @react-native-oh-tpl/react-native-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, { useState} from 'react'; @@ -120,7 +119,7 @@ export function SliderExample() { + Cooldown is over and onTimer will not be called again! ); } return ( - + {this.state.listening && There is still {this.state.cd} seconds to go.} - 点击按钮启动倒计时 + Click the button to start the countdown ); } } ``` -下面的代码展示了Subscribe这个组件的基本使用场景： -> [!WARNING] 使用时 target一般配合fbemitter组件使用 + +The following code shows the basic use scenario of the Subscribe component: + +> [!WARNING] Generally, the `target` is used together with the fbemitter component. +> ```js import React from 'react'; import { Subscribe } from 'react-subscribe'; @@ -130,12 +134,12 @@ export class ReactSubscribeSubscribeTest extends React.Component { value={111} /> this.onChangeMessage(text)} value={111} /> - + '1.监听test1' {this.test1Message !== null && test1监听数据:{this.test1Message}} @@ -148,7 +152,8 @@ export class ReactSubscribeSubscribeTest extends React.Component { } } ``` -使用样例 + +Example ``` import { EventEmitter } from 'fbemitter'; @@ -156,7 +161,9 @@ import { EventEmitter } from 'fbemitter'; ``` -下面的代码展示了Fetch这个组件的基本使用场景： + +The following code shows the basic use scenario of the Fetch component: + ```js import React from 'react'; import { View,StyleSheet,Text,TouchableOpacity,Button } from 'react-native'; @@ -188,7 +195,7 @@ export class ReactSubscribeFetchTest extends React.Component { if(this.props.manners === 1){ return( - + {this.state.listening && } @@ -197,7 +204,7 @@ export class ReactSubscribeFetchTest extends React.Component { } return( - + {this.state.listening && } @@ -214,7 +221,7 @@ function SomeComponent({ data, loading, error, reload, statusCode }) { return ( error:{error.message} - + ); } @@ -241,7 +248,7 @@ function SomeComponent2({ data, loading, error, reload }) { return ( Error: {error.message} - + ); } @@ -253,23 +260,24 @@ function SomeComponent2({ data, loading, error, reload }) { ); } ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: -1. RNOH: 0.72.26; SDK：HarmonyOS-Next-DB1; IDE：DevEco Studio 5.0.3.300; ROM：3.0.0.25; -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; +1. RNOH: 0.72.26; SDK: HarmonyOS-Next-DB1; IDE: DevEco Studio 5.0.3.300; ROM: 3.0.0.25; +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 ->[!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-subscribe: -Fetch组件详情见[react-subscribe](https://github.com/tdzl2003/react-subscribe/blob/master/src/Fetch.js) + +For details about the Fetch component, see [react-subscribe](https://github.com/tdzl2003/react-subscribe/blob/master/src/Fetch.js) | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -279,7 +287,7 @@ Fetch组件详情见[react-subscribe](https://github.com/tdzl2003/react-subscrib | type | 请求返回数据处理的类型(值只能为'text'或 'json'或'blob') | string | yes | Android/iOS | yes | | children| 子组件，接收请求返回数据处理,接收参数有(loading:是否在请求中,statusCode：请求状态码（自定义请求不设置该值）,data:返回业务数据,error:请求错误信息（例：请求超时）,reload:刷新当前请求方法) | element | no | Android/iOS | yes | -Timer组件详情见[react-subscribe](https://github.com/tdzl2003/react-subscribe/blob/master/src/Timer.js) +For details about the Timer component, see [react-subscribe](https://github.com/tdzl2003/react-subscribe/blob/master/src/Timer.js) | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -287,7 +295,7 @@ Timer组件详情见[react-subscribe](https://github.com/tdzl2003/react-subscrib | onTimer | 定时执行方法 | function | no | Android/iOS | yes | | children | 子组件 | element | no | Android/iOS | yes | -Subscribe组件详情见[react-subscribe](https://github.com/tdzl2003/react-subscribe/blob/master/src/Subscribe.js) +For details about the Subscribe component, see [react-subscribe](https://github.com/tdzl2003/react-subscribe/blob/master/src/Subscribe.js) | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -296,7 +304,7 @@ Subscribe组件详情见[react-subscribe](https://github.com/tdzl2003/react-subs | listener | 监听方法（当发射器触发当前事件时执行的方法） | function | no | Android/iOS | yes | | children | 子组件 | element | no | Android/iOS | yes | -SubscribeDOM组件详情见[react-subscribe](https://github.com/tdzl2003/react-subscribe/blob/master/src/SubscribeDOM.js) +For details about the SubscribeDOM component, see [react-subscribe](https://github.com/tdzl2003/react-subscribe/blob/master/src/SubscribeDOM.js) | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | @@ -305,10 +313,10 @@ SubscribeDOM组件详情见[react-subscribe](https://github.com/tdzl2003/react-s | listener | 监听方法（当发射器触发当前事件时执行的方法） | function | no | webOnly | no | | children | 子组件 | element | no | webOnly | no | -## 遗留问题 +## Known Issues -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The ISC License (ISC)](https://www.isc.org/licenses/) ，请自由地享受和参与开源。 \ No newline at end of file +This project is licensed under [The ISC License (ISC)](https://www.isc.org/licenses/). \ No newline at end of file -- Gitee From 3c367f74632047b2e851469e97dd31da57a061fb Mon Sep 17 00:00:00 2001 From: zWX1317523 Date: Mon, 28 Oct 2024 10:02:47 +0800 Subject: [PATCH 16/35] =?UTF-8?q?docs:=20=E7=BF=BB=E8=AF=91react-native-pi?= =?UTF-8?q?ckers=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-pickers.md | 58 ++++++++++++++++++-------------------- 1 file changed, 27 insertions(+), 31 deletions(-) diff --git a/en/react-native-pickers.md b/en/react-native-pickers.md index 1ca16654c..ab7dc1e76 100644 --- a/en/react-native-pickers.md +++ b/en/react-native-pickers.md @@ -1,6 +1,4 @@ - - -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-pickers

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

-> [!TIP] [Github 地址](https://github.com/iberHK/react-native-picker) +> [!TIP] [GitHub address](https://github.com/iberHK/react-native-picker) -## 安装与使用 +## Installation and Usage -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -36,9 +34,9 @@ yarn add react-native-pickers@2.0.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 { View, Text, TouchableOpacity } from "react-native"; @@ -46,23 +44,23 @@ import { BaseComponent, AreaPicker, DatePicker } from "react-native-pickers"; var AreaJson = [ { - name: "香港", - city: [{ name: "香港", area: ["中西區", "灣仔區", "東區", "南區"] }], + name: "Hong Kong", + city: [{ name: "Hong Kong", area: ["中西區", "灣仔區", "東區", "南區"] }], }, { - name: "台灣", + name: "Taiwan", city: [ { - name: "台灣", + name: "Taiwan", area: ["臺北市", "高雄市", "臺北縣", "桃園縣", "新竹縣"], }, ], }, { - name: "澳門", + name: "Macao", city: [ { - name: "澳門", + name: "Macao", area: ["花地瑪堂區", "聖安多尼堂區", "大堂區", "望德堂區"], }, ], @@ -73,7 +71,7 @@ export default class MainPage extends BaseComponent { constructor(props) { super(props); this.state = { - unit: ["年", "月", "日"], + unit: ["Year", "Month ", "Day"], startYear: 1900, active: false, modalVisible: false, @@ -128,7 +126,7 @@ export default class MainPage extends BaseComponent { alignItems: "center", }} > - {this.renderButton("行政区域picker", () => { + {this.renderButton("Administrative region picker", () => { this.AreaPicker.show(); })} {this.renderButton("DatePicker", () => { @@ -162,23 +160,23 @@ export default class MainPage extends BaseComponent { ## Link -本库依赖@react-native-oh-tpl/react-native-svg，如已在鸿蒙工程中引入过该库，则无需再次引入。 +The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-svg. 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. -如未引入请参照[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg-capi.md#link)进行引入 +If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-svg](/en/react-native-svg-capi.md) to add it to your project. -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -本文档内容基于以下版本验证通过： +This document is verified based on the following versions: -1. RNOH: 0.72.26; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.300; ROM：3.0.0.25; +1. RNOH: 0.72.26; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.300; ROM: 3.0.0.25; -## 属性 +## 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. ### AlertDialog @@ -326,12 +324,10 @@ export default class MainPage extends BaseComponent { | borderRadius | 背景圆角 | number | no | All | yes | | backgroundColor | 背景颜色 | string | no | All | yes | -## 遗留问题 - -## 其他 +## Known Issues -## 开源协议 +## Others -本项目基于 [The ISC License (ISC)](https://www.isc.org/licenses/) ，请自由地享受和参与开源。 +## License - +This project is licensed under [The ISC License (ISC)](https://www.isc.org/licenses/). -- Gitee From 721eb14560144c9a7ee1a983452c2383e0270294 Mon Sep 17 00:00:00 2001 From: zWX1317523 Date: Mon, 28 Oct 2024 10:13:33 +0800 Subject: [PATCH 17/35] =?UTF-8?q?docs:=20=E7=BF=BB=E8=AF=91react-native-QR?= =?UTF-8?q?Code=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-QRCode.md | 52 +++++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/en/react-native-QRCode.md b/en/react-native-QRCode.md index adcdd780d..aeb114825 100644 --- a/en/react-native-QRCode.md +++ b/en/react-native-QRCode.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

react-native-qrcode

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

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-qrcode) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-qrcode) -## 安装与使用 +## Installation and Usage -1、请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-qrcode](https://github.com/react-native-oh-library/react-native-qrcode/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-qrcode](https://github.com/react-native-oh-library/react-native-qrcode/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-qrcode@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 } from "react"; @@ -60,14 +60,14 @@ export const QrCodeExamle = () => { return ( setText(text)} value={text} /> -