diff --git a/en/react-native-translucent-modal.md b/en/react-native-translucent-modal.md index f7abf8978859d82b62eac9ec2c32aa38b3243c37..f8c30c5858cb6b90bd340e263e6c81cec9dfc04e 100644 --- a/en/react-native-translucent-modal.md +++ b/en/react-native-translucent-modal.md @@ -14,26 +14,39 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-translucent-modal) -## Installation and Usage +Please refer to the Releases page of the third-party library for the corresponding version information: -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-translucent-modal Releases](https://github.com/react-native-oh-library/react-native-translucent-modal/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +| Third-party Library Version | Release Information | Supported RN Version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.1.0 | [@react-native-oh-tpl/react-native-translucent-modalReleases](https://github.com/react-native-oh-library/react-native-translucent-modal/releases) | 0.72 | +| 1.2.0 | [@react-native-ohos/react-native-translucent-modal Releases]() | 0.77 | -Go to the project directory and execute the following instruction: +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +## Installation and Usage +Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-translucent-modal + +# 0.77 +npm install @react-native-ohos/react-native-translucent-modal ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-translucent-modal + +# 0.77 +yarn add @react-native-ohos/react-native-translucent-modal ``` @@ -86,9 +99,10 @@ export const E_ReactNativeTranslucentModal: React.FC = (): JSX.Element => { ### 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. +This document is verified based on the following versions: -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-translucent-modal Releases](https://github.com/react-native-oh-library/react-native-translucent-modal/releases) +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.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; Properties diff --git a/en/react-native-zip-archive.md b/en/react-native-zip-archive.md index e743232738363b289907e99a239e0db8aee8d9f0..7159185fa76364c847b548b03eead1da3512363f 100644 --- a/en/react-native-zip-archive.md +++ b/en/react-native-zip-archive.md @@ -15,25 +15,39 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-zip-archive) -## Installation and Usage +Please refer to the Releases page of the third-party library for the corresponding version information: -Find the matching version information in the release address of a third-party library：[@react-native-oh-tpl/react-native-zip-archive Releases](https://github.com/react-native-oh-library/react-native-zip-archive/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +| Third-party Library Version | Release Information | Supported RN Version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 7.0.0 | [@react-native-oh-tpl/react-native-zip-archive Releases](https://github.com/react-native-oh-library/react-native-zip-archive/releases) | 0.72 | +| 7.1.0 | [@react-native-ohos/react-native-zip-archive Releases]() | 0.77 | -Go to the project directory and execute the following instruction: +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +## Installation and Usage + +Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-zip-archive + +# 0.77 +npm install @react-native-ohos/react-native-zip-archive ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-zip-archive + +# 0.77 +yarn add @react-native-ohos/react-native-zip-archive ``` @@ -395,7 +409,9 @@ const styles = StyleSheet.create({ ## Use Codegen -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](/en/codegen.md). +> [!TIP] V7.0.0 does not require executing Codegen. + +This library has adapted Codegen, and before using it, you need to actively execute the generation of third-party library bridge code. For details, please refer to[Codegen Usage Document](/zh-cn/codegen.md)。 ## Link @@ -418,14 +434,14 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. Currently, two methods are available: - - Method 1 (recommended): Use the HAR file. > [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. Open `entry/oh-package.json5` file and add the following dependencies: +- 0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -433,6 +449,15 @@ Open `entry/oh-package.json5` file and add the following dependencies: } ``` +- 0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", ++ "@react-native-ohos/react-native-zip-archive": "file:../../node_modules/@react-native-ohos/react-native-zip-archive/harmony/zipArchive_package.har" + } +``` + Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -458,6 +483,10 @@ set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") + set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +# 0.77 ++ set(ZIP_ARCHIVE_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@react-native-ohos/react-native-zip-archive/src/main/cpp") + set(LOG_VERBOSITY_LEVEL 1) set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") @@ -468,16 +497,31 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# 0.72 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-zip-archive/src/main/cpp" ./zipArchive-package) + +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-zip-archive/src/main/cpp" ./zipArchive-package) + # RNOH_END: manual_package_linking_1 +# 0.72 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") +# 0.77 ++ file(GLOB ZIP_ARCHIVE_GENERATED_CPP_FILES "${ZIP_ARCHIVE_CPP_DIR}/generated/*.cpp") + add_library(rnoh_app SHARED ${GENERATED_CPP_FILES} ++ ${ZIP_ARCHIVE_GENERATED_CPP_FILES} "./PackageProvider.cpp" "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" ) + +# 0.77 ++ target_include_directories(rnoh_app PUBLIC ${ZIP_ARCHIVE_CPP_DIR}) + target_link_libraries(rnoh_app PUBLIC rnoh) # RNOH_BEGIN: manual_package_linking_2 @@ -486,13 +530,33 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) # RNOH_END: manual_package_linking_2 ``` +open `entry/src/main/cpp/PackageProvider.cpp` and add： + +```diff +#include "RNOH/PackageProvider.h" ++#include "generated/ZipArchivePackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) +{ + return { ++ std::make_shared(ctx), + }; +} +``` + ### 4. Introducing ZipArchivePackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff +// 0.72 + import {ZipArchivePackage} from '@react-native-oh-tpl/react-native-zip-archive/ts'; +// 0.77 ++ import {ZipArchivePackage} from '@react-native-ohos/react-native-zip-archive/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -518,9 +582,10 @@ Then build and run the code. ### 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. +This document is verified based on the following versions: -Check the release version information in the release address of the third-party library: [@react-native-oh-library/react-native-zip-archive Releases](https://github.com/react-native-oh-library/react-native-zip-archive/releases) +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.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## API diff --git a/zh-cn/react-native-translucent-modal.md b/zh-cn/react-native-translucent-modal.md index 56a081656d2dc5b0054d1e158e762131ce61ec1e..46674175772e4f379bdcbbe37a2c03a6d27b59ec 100644 --- a/zh-cn/react-native-translucent-modal.md +++ b/zh-cn/react-native-translucent-modal.md @@ -14,9 +14,16 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-translucent-modal) -## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.1.0 | [@react-native-oh-tpl/react-native-translucent-modalReleases](https://github.com/react-native-oh-library/react-native-translucent-modal/releases) | 0.72 | +| 1.2.0 | [@react-native-ohos/react-native-translucent-modal Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-translucent-modal Releases](https://github.com/react-native-oh-library/react-native-translucent-modal/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 进入到工程目录并输入以下命令： @@ -25,13 +32,21 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-translucent-modal + +# 0.77 +npm install @react-native-ohos/react-native-translucent-modal ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-translucent-modal + +# 0.77 +yarn add @react-native-ohos/react-native-translucent-modal ``` @@ -84,9 +99,10 @@ export const E_ReactNativeTranslucentModal: React.FC = (): JSX.Element => { ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +本文档内容基于以下版本验证通过： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-translucent-modal Releases](https://github.com/react-native-oh-library/react-native-translucent-modal/releases) +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.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性 @@ -98,10 +114,10 @@ export const E_ReactNativeTranslucentModal: React.FC = (): JSX.Element => { | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------------------- | --------------------------------------------------- | -------- | -------- | -------- | ----------------- | -| `animationType` | Animation type of modal. | string | No | All | yes | -| `transparent` | Whether the background of the modal is transparent. | boolean | No | All | yes | -| `visible` | Controls whether the modal is displayed. | boolean | No | All | yes | -| `onRequestClose?: () => void` | Called when the model request close. | function | No | ALL | yes | +| `animationType` | 模态框的动画类型。 | string | No | All | yes | +| `transparent` | 模态框背景是否透明。 | boolean | No | All | yes | +| `visible` | 控制模态框是否显示。 | boolean | No | All | yes | +| `onRequestClose?: () => void` | 当模态框请求关闭时调用。 | function | No | ALL | yes | ## 遗留问题 diff --git a/zh-cn/react-native-zip-archive.md b/zh-cn/react-native-zip-archive.md index 91e7f4b3756ab7618b4db3601726dbf75686ed6d..ef30591714a4e733f95d385da205218d2f55d6a6 100644 --- a/zh-cn/react-native-zip-archive.md +++ b/zh-cn/react-native-zip-archive.md @@ -15,9 +15,16 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-zip-archive) -## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 7.0.0 | [@react-native-oh-tpl/react-native-zip-archive Releases](https://github.com/react-native-oh-library/react-native-zip-archive/releases) | 0.72 | +| 7.1.0 | [@react-native-ohos/react-native-zip-archive Releases]() | 0.77 | -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-zip-archive Releases](https://github.com/react-native-oh-library/react-native-zip-archive/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + +## 安装与使用 进入到工程目录并输入以下命令： @@ -25,14 +32,24 @@ #### **npm** +#### **npm** + ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-zip-archive + +# 0.77 +npm install @react-native-ohos/react-native-zip-archive ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-zip-archive + +# 0.77 +yarn add @react-native-ohos/react-native-zip-archive ``` @@ -402,6 +419,8 @@ const styles = StyleSheet.create({ ## 使用 Codegen +> [!TIP] V7.0.0不需要执行Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -434,6 +453,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- 0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -441,6 +462,15 @@ const styles = StyleSheet.create({ } ``` +- 0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", ++ "@react-native-ohos/react-native-zip-archive": "file:../../node_modules/@react-native-ohos/react-native-zip-archive/harmony/zipArchive_package.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -466,6 +496,10 @@ set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") + set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +# 0.77 ++ set(ZIP_ARCHIVE_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@react-native-ohos/react-native-zip-archive/src/main/cpp") + set(LOG_VERBOSITY_LEVEL 1) set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") @@ -476,16 +510,31 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# 0.72 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-zip-archive/src/main/cpp" ./zipArchive-package) + +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-zip-archive/src/main/cpp" ./zipArchive-package) + # RNOH_END: manual_package_linking_1 +# 0.72 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") +# 0.77 ++ file(GLOB ZIP_ARCHIVE_GENERATED_CPP_FILES "${ZIP_ARCHIVE_CPP_DIR}/generated/*.cpp") + add_library(rnoh_app SHARED ${GENERATED_CPP_FILES} ++ ${ZIP_ARCHIVE_GENERATED_CPP_FILES} "./PackageProvider.cpp" "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" ) + +# 0.77 ++ target_include_directories(rnoh_app PUBLIC ${ZIP_ARCHIVE_CPP_DIR}) + target_link_libraries(rnoh_app PUBLIC rnoh) # RNOH_BEGIN: manual_package_linking_2 @@ -494,13 +543,33 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) # RNOH_END: manual_package_linking_2 ``` +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" ++#include "generated/ZipArchivePackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) +{ + return { ++ std::make_shared(ctx), + }; +} +``` + ### 4.在 ArkTs 侧引入 ZipArchivePackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff +// 0.72 + import {ZipArchivePackage} from '@react-native-oh-tpl/react-native-zip-archive/ts'; +// 0.77 ++ import {ZipArchivePackage} from '@react-native-ohos/react-native-zip-archive/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -526,9 +595,10 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +本文档内容基于以下版本验证通过： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-zip-archive Releases](https://github.com/react-native-oh-library/react-native-zip-archive/releases) +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.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## API @@ -538,14 +608,14 @@ ohpm install | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------- | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | -| zip | File or folder compression | string | no | All | yes | -| unzip | Decompression of files or folders | string | no | All | yes | -| zipWithPassword | Compress files or folders with a password | string | no | All | yes | -| unzipWithPassword | Extract files or folders with a password | string | no | All | yes | -| isPasswordProtected | Check if the password exists during password decompression | boolean | no | All | yes | -| unzipAssets | Pass in the specified directory during decompression | string | no | All | yes | -| getUncompressedSize | File size after decompression | number | no | All | yes | -| subscribe | Display progress bar during compression and password decompression | void | no | All | yes | +| zip | 文件或文件夹压缩 | string | no | All | yes | +| unzip | 文件或文件夹解压缩 | string | no | All | yes | +| zipWithPassword | 使用密码压缩文件或文件夹 | string | no | All | yes | +| unzipWithPassword | 使用密码解压文件或文件夹 | string | no | All | yes | +| isPasswordProtected | 检查解压时是否存在密码保护 | boolean | no | All | yes | +| unzipAssets | 解压时传入指定目录 | string | no | All | yes | +| getUncompressedSize | 获取解压后的文件大小 | number | no | All | yes | +| subscribe | 在压缩和密码解压过程中显示进度条 | void | no | All | yes | ## 遗留问题