diff --git a/en/react-native-crypto.md b/en/react-native-crypto.md index b1f6c1448a7a91c0a2ebcca99f6a0f79dee07fd9..72b8ada7d04e9b308db99bc6aaf0f9c044d7c521 100644 --- a/en/react-native-crypto.md +++ b/en/react-native-crypto.md @@ -14,6 +14,13 @@ > [!TIP] [GitHub address](https://github.com/tradle/react-native-crypto/tree/639d8e29ac1feae20f95f2e285851d5ed4898a9a) +Check the release notes of the third-party library to pick the matching version: + +| Version | RN Version | +| ---------- | ---------- | +| 2.2.0 | 0.72 | +| 2.2.1 | 0.77 | + ## Installation and Usage [!TIP]This repository depends on [@react-native-oh-tpl/react-native-randombytes](./react-native-randombytes.md) @@ -23,13 +30,19 @@ #### **npm** ```bash +# V0.72 npm install react-native-crypto@2.2.0 +# V0.77 +npm install react-native-crypto@2.2.1 ``` #### **yarn** ```bash +# V0.72 yarn add react-native-crypto@2.2.0 +# V0.77 +yarn add react-native-crypto@2.2.1 ``` @@ -138,6 +151,8 @@ If it is not included, follow the guide provided in @react-native-oh-tpl/react-n This document is verified based on the following versions: 1. RNOH: 0.72.27; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; +2. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 6.0.0.868; ROM: 5.0.0.107; +3. 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/en/react-native-fileupload.md b/en/react-native-fileupload.md index 7ff56e105b937a9f8996f0075ada93b018b04758..75e1dfb45f1aadb17823a0b22712456b961a9343 100644 --- a/en/react-native-fileupload.md +++ b/en/react-native-fileupload.md @@ -15,26 +15,41 @@ > [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-fileupload) -## Installation and Usage +Check the release notes of the third-party library to pick the matching version: + +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 1.1.0 | @react-native-oh-tpl/react-native-fileupload | [Github](https://github.com/react-native-oh-library/react-native-fileupload) | [Github Releases](https://github.com/react-native-oh-library/react-native-fileupload/releases) | 0.72 | +| 1.2.0 | @react-native-ohos/react-native-fileupload | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-fileupload) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-fileupload/releases) | 0.77 | -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-fileupload Releases](https://github.com/react-native-oh-library/react-native-fileupload/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. +## Installation and Usage -Go to the project directory and execute the following instruction: +For legacy versions that are not published to npm, follow the [installation guide](/en/tgz-usage-en.md) to install the TGZ package. +Go to the project directory and run: +### Package Managers #### **npm** ```bash +# V0.72 npm install @react-native-oh-tpl/react-native-fileupload + +# V0.77 +npm install @react-native-ohos/react-native-fileupload ``` #### **yarn** ```bash +# V0.72 yarn add @react-native-oh-tpl/react-native-fileupload + +# V0.77 +yarn add @react-native-ohos/react-native-fileupload ``` @@ -121,7 +136,9 @@ let styles = StyleSheet.create({ ## Use Codegen -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] V0.77 does not require running Codegen. + +This repository has been adapted to `Codegen`. Generate the third-party bridge code before usage. For details, see the [Codegen Usage Guide](/en/codegen.md). ## Link @@ -139,6 +156,7 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. } } ``` + ### 2. Introducing Native Code Currently, two methods are available: @@ -150,6 +168,8 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: +- V0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -157,6 +177,15 @@ Open `entry/oh-package.json5` file and add the following dependencies: } ``` +- V0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-fileupload": "file:../../node_modules/@react-native-ohos/react-native-fileupload/harmony/fileupload.har" + } +``` + Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -170,13 +199,16 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Configuring CMakeLists and Introducing FileUpLoadPackage +### 3. Importing FileUpLoadPackage on the ArkTS Side Open `entry/src/main/ets/RNPackagesFactory.ts` and add the following code: ```diff ... ++ // V0.72 + import {FileUpLoadPackage} from '@react-native-oh-tpl/react-native-fileupload/ts'; ++ // V0.77 ++ import {FileUpLoadPackage} from '@react-native-ohos/react-native-fileupload/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -186,7 +218,69 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Running +### 4. Configuring CMakeLists and Adding FileuploadPackage + +> [!TIP] This step is required for V0.77. + +Open `entry/src/main/cpp/CMakeLists.txt` and add: + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +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") +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") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-fileupload/src/main/cpp" ./fileupload) + +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++target_link_libraries(rnoh_app PUBLIC rnoh_fileupload) +# RNOH_END: manual_package_linking_2 +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++#include "FileuploadPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 5. Running Click the `sync` button in the upper right corner. @@ -205,7 +299,10 @@ Then build and run the code. 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-fileupload Releases](https://github.com/react-native-oh-library/react-native-fileupload/releases) +This repository has been verified with the following configurations: + +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0 (API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107 +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/en/react-native-iconfont-cli.md b/en/react-native-iconfont-cli.md index 321e1348973498bd130effe818f12b3502a44907..049be593694e7063757743127c375373ce269261 100644 --- a/en/react-native-iconfont-cli.md +++ b/en/react-native-iconfont-cli.md @@ -15,6 +15,12 @@ > [!TIP] [GitHub address](https://github.com/iconfont-cli/react-native-iconfont-cli) +Check the release notes of the third-party library to pick the matching version: + +| Version | RN Version | +| ---------- | ---------- | +| 2.2.4 | 0.72/0.77 | + ## Installation and Usage Go to the project directory and execute the following instruction: @@ -193,6 +199,8 @@ If it is not included, follow the guide provided in [@react-native-oh-tpl/react- 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.22; +2. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; For details, see [react-native-iconfont-cli](https://github.com/iconfont-cli/react-native-iconfont-cli/blob/master/README.md) diff --git a/en/react-native-mask-text.md b/en/react-native-mask-text.md index fbc6838f7b87c8e72c6cdc4533db76a072f7ca69..a9ef47bccf5480a026dc272288be8183ba94d0ba 100644 --- a/en/react-native-mask-text.md +++ b/en/react-native-mask-text.md @@ -14,6 +14,13 @@ > [!TIP] [ GitHub address](https://github.com/akinncar/react-native-mask-text) + +Check the release notes of the third-party library to pick the matching version: + +| Version | RN Version | +| ---------- | ---------- | +| 0.15.0 | 0.72/0.77 | + ## Installation and Usage Go to the project directory and execute the following instruction: @@ -23,13 +30,13 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash -npm install react-native-mask-text@0.14.2 +npm install react-native-mask-text@0.15.0 ``` #### **yarn** ```bash -yarn add react-native-mask-text@0.14.2 +yarn add react-native-mask-text@0.15.0 ``` @@ -126,6 +133,8 @@ 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.400SP7; 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; +3. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107; +4. 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-material-buttons.md b/en/react-native-material-buttons.md index c8049f5b84a8c42187e107cfdba2ed46ce71b3f4..423d8587be33edb683e5c3c201b6d642fa3aa431 100644 --- a/en/react-native-material-buttons.md +++ b/en/react-native-material-buttons.md @@ -15,11 +15,21 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-material-buttons) +Check the release notes of the third-party library to choose the matching version: + +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 0.6.0 | @react-native-oh-tpl/react-native-material-buttons | [Github](https://github.com/react-native-oh-library/react-native-material-buttons) | [Github Releases](https://github.com/react-native-oh-library/react-native-material-buttons/releases) | 0.72 | +| 0.7.0 | @react-native-ohos/react-native-material-buttons | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-material-buttons) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-material-buttons/releases) | 0.77 | + +For legacy versions that are not published to npm, follow the [installation guide](/en/tgz-usage-en.md) to install the TGZ package. + + ## Installation and Usage -Find the matching version information in the release address of a third-party library：[@react-native-oh-tpl/react-native-material-buttons Releases](https://github.com/react-native-oh-library/react-native-material-buttons/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. +Go to the project directory and run: -Go to the project directory and execute the following instruction: +### Package Managers @@ -27,13 +37,25 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# V0.72 npm install @react-native-oh-tpl/react-native-material-buttons +npm install deprecated-react-native-prop-types + +# V0.77 +npm install @react-native-ohos/react-native-material-buttons +npm install deprecated-react-native-prop-types ``` #### **yarn** ```bash +# V0.72 yarn add @react-native-oh-tpl/react-native-material-buttons +yarn add deprecated-react-native-prop-types + +# V0.77 +yarn add @react-native-ohos/react-native-material-buttons +yarn add deprecated-react-native-prop-types ``` @@ -206,7 +228,10 @@ export default MaterialButtons; 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-material-buttons Releases](https://github.com/react-native-oh-library/react-native-material-buttons/releases) +This library has been validated with the following configurations: + +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0 (API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107 +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-material-ui.md b/en/react-native-material-ui.md index 7ae4923129769b904b89e43a92e08f7c5f7fe2cb..51ef812ab94c5055c20d0419db73695389dd8b80 100644 --- a/en/react-native-material-ui.md +++ b/en/react-native-material-ui.md @@ -15,24 +15,39 @@ > [!tip] [GitHub address](https://github.com/xotahal/react-native-material-ui) +Check the release page of the third-party library to find the matching version information: + +| Version | Package Name | Repository | Release | Supported RN Version | +| ------- | ------------- | ---------- | ------- | -------------------- | +| 1.30.1 | @react-native-oh-tpl/react-native-material-ui | [GitHub](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-material-ui%2F) | [GitHub Releases](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-material-ui%2Freleases) | 0.72 | +| 1.31.0 | @react-native-ohos/react-native-material-ui | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-material-ui) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-material-ui/releases) | 0.77 | + ## Installation and Usage -Find the matching version information in the release address of a third-party library：[@react-native-oh-tpl/react-native-material-ui Releases](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-material-ui%2Freleases).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. +For older versions that are not published to npm, refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. -Go to the project directory and execute the following instruction: +Go to the project directory and run the following commands: #### **npm** ```bash +# V1.30.1 for RN0.72 npm install @react-native-oh-tpl/react-native-material-ui + +# V1.31.0 for RN0.77 +npm install @react-native-ohos/react-native-material-ui ``` #### **yarn** ```bash +# V1.30.1 for RN0.72 yarn add @react-native-oh-tpl/react-native-material-ui + +# V1.31.0 for RN0.77 +yarn add @react-native-ohos/react-native-material-ui ``` @@ -189,9 +204,12 @@ struct Index { ### 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. +To use this repository, make sure you are using the proper combination of React Native, RNOH, DevEco Studio, SDK, and device ROM. + +Validated environments: -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-material-ui Releases](https://github.com/react-native-oh-library/react-native-material-ui/releases) +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0 (API 12); IDE: DevEco Studio 6.0.0.868; ROM: 5.0.0.107 +2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112 ## Components diff --git a/en/react-native-pdf.md b/en/react-native-pdf.md index 3a457e5b77445744383fed95adad0625bf03bb98..182af4cf954f6569d2ccca8f49e40c3b51ba4a99 100644 --- a/en/react-native-pdf.md +++ b/en/react-native-pdf.md @@ -14,11 +14,16 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-pdf) -## Installation and Usage +Check the release notes of the third-party library to pick the matching version. For older builds that are not published to npm, follow the [installation guide](/en/tgz-usage-en.md) to install the TGZ package. + +| Version | Package Name | Repository | Release | RN Version | +| ------- | ------------- | ---------- | ------- | ---------- | +| 6.7.4 | @react-native-oh-tpl/react-native-pdf | [GitHub](https://github.com/react-native-oh-library/react-native-pdf) | [GitHub Releases](https://github.com/react-native-oh-library/react-native-pdf/releases) | 0.72 | +| 6.8.0 | @react-native-ohos/react-native-pdf | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-pdf) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-pdf/releases) | 0.77 | -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-pdf Releases](https://github.com/react-native-oh-library/react-native-pdf/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. +## Installation and Usage -Go to the project directory and execute the following instruction: +Go to the project directory and run: @@ -27,13 +32,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# V0.72 npm install @react-native-oh-tpl/react-native-pdf + +# V0.77 +npm install @react-native-ohos/react-native-pdf ``` #### **yarn** ```bash +# V0.72 yarn add @react-native-oh-tpl/react-native-pdf + +# V0.77 +yarn add @react-native-ohos/react-native-pdf ``` @@ -114,6 +127,8 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: +- V0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -121,6 +136,15 @@ Open `entry/oh-package.json5` file and add the following dependencies: } ``` +- V0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-pdf": "file:../../node_modules/@react-native-ohos/react-native-pdf/harmony/pdfview.har" + } +``` + Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -156,7 +180,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V0.72 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-pdf/src/main/cpp" ./pdfview) + +# V0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-pdf/src/main/cpp" ./pdfview) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -197,8 +227,12 @@ Find `function buildCustomRNComponent()`, which is usually located in `entry/src ```diff ... ++ // V0.72 + import { RTNPdfView, PDF_VIEW_TYPE } from '@react-native-oh-tpl/react-native-pdf'; ++ // V0.77 ++ import { RTNPdfView, PDF_VIEW_TYPE } from '@react-native-ohos/react-native-pdf'; + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... @@ -244,9 +278,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. +Use the correct React Native, RNOH, DevEco Studio, and ROM versions when integrating this library. The following combinations have been verified: -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) +1. RNOH: 0.72.38; SDK: HarmonyOS 5.0.0 (API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107 +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 @@ -284,6 +319,8 @@ Check the release version information in the release address of the third-party | onPageSingleTap | callback when page was single tapped | function(page) | NO | iOS / Android | no | | onScaleChanged | callback when scale page | function(scale) | NO | iOS / Android | yes | | onPressLink | callback when link tapped | function(uri) | NO | iOS / Android | yes | +| scrollEnabled (6.7.7+) | enable or disable scrolling | bool | NO | iOS | yes | +| progressContainerStyle (6.7.7+) | support normal view style, you can use this to set border/spacing color | object | NO | iOS / Android | no | #### Source @@ -323,6 +360,7 @@ Check the release version information in the release address of the third-party - [ ] 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) +- [ ] Several properties in the V0.77 package are not yet HarmonyOS-ready: [issue #1](https://gitcode.com/openharmony-sig/rntpc_react-native-pdf/issues/1) ## Others diff --git a/en/react-native-sortable-list.md b/en/react-native-sortable-list.md index 75245516252ecc1db7328e9cd226289ffe8245a8..2d617885d78999f38e03ee099f717adfdf452ba7 100644 --- a/en/react-native-sortable-list.md +++ b/en/react-native-sortable-list.md @@ -15,25 +15,35 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-sortable-list) -## Installation and Usage +Check the release notes of the third-party library to pick the matching version: -Find the matching version information in the release address of a third-party library：[@react-native-oh-tpl/react-native-sortabel-list Releases](https://github.com/react-native-oh-library/react-native-sortable-list/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. +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 0.0.25 | @react-native-oh-tpl/react-native-sortable-list | [Github](https://github.com/react-native-oh-library/react-native-sortable-list) | [Github Releases](https://github.com/react-native-oh-library/react-native-sortable-list/releases) | 0.72 | +| 0.1.0 | @react-native-ohos/react-native-sortable-list | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-sortable-list) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-sortable-list/releases) | 0.77 | -Go to the project directory and execute the following instruction: +## Installation and Usage +Go to the project directory and run: #### **npm** ```bash +#v0.72 npm install @react-native-oh-tpl/react-native-sortable-list +#v0.77 +npm install @react-native-ohos/react-native-sortable-list ``` #### **yarn** ```bash +#v0.72 yarn add @react-native-oh-tpl/react-native-sortable-list +#v0.77 +yarn add @react-native-ohos/react-native-sortable-list ``` @@ -234,9 +244,10 @@ const styles = StyleSheet.create({ 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-sortabel-list Releases](https://github.com/react-native-oh-library/react-native-sortable-list/releases) +This repository has been verified with the following configurations: -## Properties +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107; +2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. diff --git a/zh-cn/react-native-crypto.md b/zh-cn/react-native-crypto.md index 548b1ad28620e48cc1d246a763046f95f2f544df..4b4d5f984a52b3f407f19ed8c0ba05525548e356 100644 --- a/zh-cn/react-native-crypto.md +++ b/zh-cn/react-native-crypto.md @@ -15,6 +15,13 @@ > [!TIP] [Github 地址](https://github.com/tradle/react-native-crypto/tree/639d8e29ac1feae20f95f2e285851d5ed4898a9a) +请到三方库的 Releases 发布地址查看配套的版本信息： + +| Version | RN Version | +| ---------- | ---------- | +| 2.2.0 | 0.72 | +| 2.2.1 | 0.77 | + ## 安装与使用 [!TIP]本库依赖[@react-native-oh-tpl/react-native-randombytes](./react-native-randombytes.md) @@ -24,13 +31,19 @@ #### **npm** ```bash +# V0.72 npm install react-native-crypto@2.2.0 +# V0.77 +npm install react-native-crypto@2.2.1 ``` #### **yarn** ```bash +# V0.72 yarn add react-native-crypto@2.2.0 +# V0.77 +yarn add react-native-crypto@2.2.1 ``` @@ -134,6 +147,8 @@ export default TestCrypto; 本文档内容基于以下版本验证通过： 1. RNOH: 0.72.27; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; +2. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 6.0.0.868; ROM: 5.0.0.107; +3. 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-fileupload.md b/zh-cn/react-native-fileupload.md index cdb379f17275fe2a210627ec0e15bf2707cc04c9..23beef8eebd47b3aa23fa5afce4e920f62d19bf9 100644 --- a/zh-cn/react-native-fileupload.md +++ b/zh-cn/react-native-fileupload.md @@ -15,9 +15,17 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-fileupload) +请到三方库的 Releases 发布地址查看配套的版本信息： + +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 1.1.0 | @react-native-oh-tpl/react-native-fileupload | [Github](https://github.com/react-native-oh-library/react-native-fileupload) | [Github Releases](https://github.com/react-native-oh-library/react-native-fileupload/releases) | 0.72 | +| 1.2.0 | @react-native-ohos/react-native-fileupload | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-fileupload) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-fileupload/releases) | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-fileupload Releases](https://github.com/react-native-oh-library/react-native-fileupload/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,13 +34,21 @@ #### **npm** ```bash +# V0.72 npm install @react-native-oh-tpl/react-native-fileupload + +# V0.77 +npm install @react-native-ohos/react-native-fileupload ``` #### **yarn** ```bash +# V0.72 yarn add @react-native-oh-tpl/react-native-fileupload + +# V0.77 +yarn add @react-native-ohos/react-native-fileupload ``` @@ -119,6 +135,8 @@ let styles = StyleSheet.create({ ## 使用 Codegen +> [!TIP] V0.77不需要执行 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -150,6 +168,8 @@ let styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -157,6 +177,15 @@ let styles = StyleSheet.create({ } ``` +- V0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-fileupload": "file:../../node_modules/@react-native-ohos/react-native-fileupload/harmony/fileupload.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -176,7 +205,10 @@ ohpm install ```diff ... + //0.72 + import {FileUpLoadPackage} from '@react-native-oh-tpl/react-native-fileupload/ts'; + //0.77 ++ import {FileUpLoadPackage} from '@react-native-ohos/react-native-fileupload/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -186,7 +218,69 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4.配置 CMakeLists 和引入 FileuploadPackage + +> [!TIP] V0.77 需要执行 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +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") +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") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-fileupload/src/main/cpp" ./fileupload) + +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_fileupload) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "FileuploadPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 5.运行 点击右上角的 `sync` 按钮 @@ -205,7 +299,10 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-fileupload Releases](https://github.com/react-native-oh-library/react-native-fileupload/releases) +在以下版本验证通过： + +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107; +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 @@ -213,9 +310,9 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 名称 | 描述 | 类型 | 是否必填 | 平台 | HarmonyOS 支持 | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| upload | File upload | void | yes | iOS/Android | yes | +| upload | 文件上传 | void | yes | iOS/Android | yes | ## 遗留问题 diff --git a/zh-cn/react-native-iconfont-cli.md b/zh-cn/react-native-iconfont-cli.md index c9b0757fe025ae9f0aed88822151dd2c6b4099cb..9d70672df8234d639aea522423fa9b7c554d0459 100644 --- a/zh-cn/react-native-iconfont-cli.md +++ b/zh-cn/react-native-iconfont-cli.md @@ -15,6 +15,13 @@ > [!TIP] [Github 地址](https://github.com/iconfont-cli/react-native-iconfont-cli) + +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 2.2.4 | 0.72/0.77 | + ## 安装与使用 进入到工程目录并输入以下命令： @@ -187,6 +194,8 @@ export default function () { 本文档内容基于以下版本验证通过： RNOH：0.72.26; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.300; ROM：3.0.0.22; +RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107; +RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性 详细请查看 [react-native-iconfont-cli](https://github.com/iconfont-cli/react-native-iconfont-cli/blob/master/README.md) 的文档介绍 @@ -197,21 +206,21 @@ RNOH：0.72.26; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3. **IconFont组件属性** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 属性名 | 描述 | 类型 | 是否必填 | 支持平台 | HarmonyOS 支持 | |-------|-------------|-----------------| -- |-------------| --- | -| color | 图标颜色 | string/string[] | no | Android/IOS | yes | -| size | 图标尺寸 | number | no | Android/IOS | yes | +| color | 图标颜色 | string/string[] | 否 | Android/IOS | 是 | +| size | 图标尺寸 | number | 否 | Android/IOS | 是 | **iconfont.json配置文件属性** -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 属性名 | 描述 | 类型 | 是否必填 | 支持平台 | HarmonyOS 支持 | | ---- |-----------------------------------------------------------|--------|-----------------| -------- | ------------------ | -| symbol_url | iconfont官网的.js后缀项目链接 | string | 和local_svgs可以二选一也可以都用 | Android/IOS | yes | -| use_typescript | 项目使用Typescript编写，请设置为true，生成的图标组件是.tsx和.js后缀。当该值为false时，生成.js和.d.ts两种文件 | bool | yes | Android/IOS | yes | -| save_dir | iconfont图标生成的组件存放的位置 | string | yes | Android/IOS | yes | -| trim_icon_prefix | 统一去掉图标通用的前缀 | string | no | Android/IOS | yes | -| default_icon_size | 图标组件默认的字体大小 | string | no | Android/IOS | yes | -| local_svgs | 本地 svg 的路径(暂不支持 color 参数) | string | 和symbol_url可以二选一也可以都用 | Android/IOS | yes | +| symbol_url | iconfont官网的.js后缀项目链接 | string | 和local_svgs可以二选一也可以都用 | Android/IOS | 是 | +| use_typescript | 项目使用Typescript编写，请设置为true，生成的图标组件是.tsx和.js后缀。当该值为false时，生成.js和.d.ts两种文件 | bool | 是 | Android/IOS | 是 | +| save_dir | iconfont图标生成的组件存放的位置 | string | 是 | Android/IOS | 是 | +| trim_icon_prefix | 统一去掉图标通用的前缀 | string | 否 | Android/IOS | 是 | +| default_icon_size | 图标组件默认的字体大小 | string | 否 | Android/IOS | 是 | +| local_svgs | 本地 svg 的路径(暂不支持 color 参数) | string | 和symbol_url可以二选一也可以都用 | Android/IOS | 是 | ## 遗留问题 diff --git a/zh-cn/react-native-mask-text.md b/zh-cn/react-native-mask-text.md index 900b39b7f52683137ea89d9efd702961ebddb1c4..07ac65ae3aa189edeb1b4628c7501b02a5b2952b 100644 --- a/zh-cn/react-native-mask-text.md +++ b/zh-cn/react-native-mask-text.md @@ -14,6 +14,13 @@ > [!TIP] [Github 地址](https://github.com/akinncar/react-native-mask-text) + +请到三方库的 Releases 发布地址查看配套的版本信息： + +| Version | RN Version | +| ---------- | ---------- | +| 0.15.0 | 0.72/0.77 | + ## 安装与使用 进入到工程目录并输入以下命令： @@ -23,13 +30,13 @@ #### **npm** ```bash -npm install react-native-mask-text@0.14.2 +npm install react-native-mask-text@0.15.0 ``` #### **yarn** ```bash -yarn add react-native-mask-text@0.14.2 +yarn add react-native-mask-text@0.15.0 ``` @@ -126,6 +133,8 @@ const styles = StyleSheet.create({ 1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; 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; +3. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107; +4. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性 @@ -133,42 +142,42 @@ const styles = StyleSheet.create({ > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Default | Required | Platform | HarmonyOS Support | +| 属性名 | 描述 | 类型 | 默认值 | 是否必填 | 支持平台 | HarmonyOS 支持 | | --- | --- | --- | --- | --- | --- | --- | -| type | Show type | String (enum) `custom`, `date`, `time`,`currency` | custom | no | All | yes | -| mask | Custom Mask. Pattern used in masked components | `9` - accept digit. `A` - accept alpha. `S` - accept alphanumeric. | null | no | All | yes | +| type | 显示类型 | String (enum) `custom`, `date`, `time`,`currency` | custom | 否 | 全平台 | 是 | +| mask | 自定义掩码，控制组件的输入匹配模式 | `9` - 接受数字；`A` - 接受字母；`S` - 接受字母或数字 | null | 否 | 全平台 | 是 | ### Date Mask These options only are used if you use prop `type="date"` in your component: -| Name | Description | Type | Default | Required | Platform | HarmonyOS Support | +| 属性名 | 描述 | 类型 | 默认值 | 是否必填 | 支持平台 | HarmonyOS 支持 | | ---------- | ----------- | ------ | ---------- | -------- | -------- | ----------------- | -| dateFormat | Date Format | string | yyyy/mm/dd | no | All | yes | +| dateFormat | 日期格式 | string | yyyy/mm/dd | 否 | 全平台 | 是 | ### Time Mask These options only are used if you use prop `type="time"` in your component: -| Name | Description | Type | Default | Required | Platform | HarmonyOS Support | +| 属性名 | 描述 | 类型 | 默认值 | 是否必填 | 支持平台 | HarmonyOS 支持 | | ---------- | ----------- | ------ | -------- | -------- | -------- | ----------------- | -| timeFormat | Time Format | string | HH:mm:ss | no | All | yes | +| timeFormat | 时间格式 | string | HH:mm:ss | 否 | 全平台 | 是 | ### Currency Mask -These options only are used if you use prop `type="currency"` in your component: +这些选项仅在您的组件中使用了 `type="currency"` 属性时才会被使用: -| Name | Description | Type | Default | Required | Platform | HarmonyOS Support | +| 属性名 | 描述 | 类型 | 默认值 | 是否必填 | 支持平台 | HarmonyOS 支持 | | ---------------------- | ------------------------------------------- | ------ | ------- | -------- | -------- | ----------------- | -| prefix | String to prepend | string | null | No | All | yes | -| decimalSeparator | Separation for decimals | string | null | No | All | yes | -| groupSeparator | Grouping separator of the integer part | string | null | No | All | yes | -| precision | Precision for fraction part (cents) | number | 0 | No | All | yes | -| groupSize | Primary grouping size of the integer part | number | 3 | No | All | yes | -| secondaryGroupSize | Secondary grouping size of the integer part | number | null | No | All | yes | -| fractionGroupSeparator | Grouping separator of the fraction part | string | null | No | All | yes | -| fractionGroupSize | Grouping size of the fraction part | number | null | No | All | yes | -| suffix | String to append | string | null | No | All | yes | +| prefix | 需要追加在数值前的前缀字符串 | string | null | 否 | 全平台 | 是 | +| decimalSeparator | 小数部分的分隔符 | string | null | 否 | 全平台 | 是 | +| groupSeparator | 整数部分的分组分隔符 | string | null | 否 | 全平台 | 是 | +| precision | 小数部分的精度（小数位数） | number | 0 | 否 | 全平台 | 是 | +| groupSize | 整数部分的主分组尺寸 | number | 3 | 否 | 全平台 | 是 | +| secondaryGroupSize | 整数部分的次级分组尺寸 | number | null | 否 | 全平台 | 是 | +| fractionGroupSeparator | 小数部分的分组分隔符 | string | null | 否 | 全平台 | 是 | +| fractionGroupSize | 小数部分的分组大小 | number | null | 否 | 全平台 | 是 | +| suffix | 需要追加在数值后的后缀字符串 | string | null | 否 | 全平台 | 是 | ## 遗留问题 diff --git a/zh-cn/react-native-material-buttons.md b/zh-cn/react-native-material-buttons.md index 700424a01a8192880b69ada40965e217ebe4f4df..fda908cfa87840d626fb4acaa532913cfa303f0f 100644 --- a/zh-cn/react-native-material-buttons.md +++ b/zh-cn/react-native-material-buttons.md @@ -15,14 +15,16 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-material-buttons) -## 安装与使用 - 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.6.0 | [@react-native-oh-tpl/react-native-material-buttons Releases](https://github.com/react-native-oh-library/react-native-material-buttons/releases) | 0.72 | -| 0.6.1 | [@react-native-ohos/react-native-material-buttons Releases]() | 0.77 | +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 0.6.0 | @react-native-oh-tpl/react-native-material-buttons | [Github](https://github.com/react-native-oh-library/react-native-material-buttons) | [Github Releases](https://github.com/react-native-oh-library/react-native-material-buttons/releases) | 0.72 | +| 0.7.0 | @react-native-ohos/react-native-material-buttons | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-material-buttons) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-material-buttons/releases) | 0.77 | + + +## 安装与使用 + 对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 @@ -32,32 +34,22 @@ #### **npm** -v0.6.0 - ```bash +#v0.72 npm install @react-native-oh-tpl/react-native-material-buttons npm install deprecated-react-native-prop-types -``` - -v0.6.1 - -``` +#v0.77 npm install @react-native-ohos/react-native-material-buttons npm install deprecated-react-native-prop-types ``` #### **yarn** -v0.6.0 - ```bash +#v0.72 yarn add @react-native-oh-tpl/react-native-material-buttons yarn add deprecated-react-native-prop-types -``` - -v0.6.1 - -``` +#v0.77 yarn add @react-native-ohos/react-native-material-buttons yarn add deprecated-react-native-prop-types ``` @@ -232,12 +224,10 @@ export default MaterialButtons; 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +在以下版本验证通过： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.6.0 | [@react-native-oh-tpl/react-native-material-buttons Releases](https://github.com/react-native-oh-library/react-native-material-buttons/releases) | 0.72 | -| 0.6.1 | [@react-native-ohos/react-native-material-buttons Releases]() | 0.77 | +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107; +2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性 @@ -247,42 +237,42 @@ export default MaterialButtons; >[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 属性名 | 描述 | 类型 | 是否必填 | 支持平台 | HarmonyOS 支持 | |:-----------------------:| :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | -| **titleStyle** | Style object for the button's title | Object | No | iOS/Android | Yes | -| **title** | Button title | String | YES | iOS/Android | Yes | -| **titleColor** | Button title color | String | No | iOS/Android | Yes | -| **disabledTitleColor** | Button title color for disabled state | String | No | iOS/Android | Yes | +| **titleStyle** | 按钮标题的样式对象 | Object | 否 | iOS/Android | 是 | +| **title** | 按钮标题 | String | 是 | iOS/Android | 是 | +| **titleColor** | 按钮标题颜色 | String | 否 | iOS/Android | 是 | +| **disabledTitleColor** | 按钮禁用状态的标题颜色 | String | 否 | iOS/Android | 是 | ## **API（RaisedTextButton）** >[!TIP] "Platform"列表示该属性在原三方库上支持的平台。 >[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 属性名 | 描述 | 类型 | 是否必填 | 支持平台 | HarmonyOS 支持 | |:-----------------------:| :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | -| **rippleOpacity** | Opacity of the ripple effect | Number | No | iOS/Android | Yes | -| **rippleDuration** | Duration of the ripple effect in milliseconds | Number | No | iOS/Android | Yes | +| **rippleOpacity** | 水波纹效果的不透明度 | Number | 否 | iOS/Android | 是 | +| **rippleDuration** | 水波纹效果持续时间（毫秒） | Number | 否 | iOS/Android | 是 | ## **API（Common）** >[!TIP] "Platform"列表示该属性在原三方库上支持的平台。 >[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | +| 属性名 | 描述 | 类型 | 是否必填 | 支持平台 | HarmonyOS 支持 | |:-----------------------:| :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | -| **color** | Button color | String | No | iOS/Android | Yes | -| **disabledColor** | Button color for disabled state | String | No | iOS/Android | Yes | -| **shadeColor** | Button shade color for focused state | String | No | iOS/Android | Yes | -| **shadeOpacity** | Button shade opacity for focused state | Number | No | iOS/Android | Yes | -| **shadeBorderRadius** | Button shade border radius | Number | No | iOS/Android | Yes | -| **focusAnimation** | Focus animation state | Animated.Value | No | iOS/Android | Yes | -| **disableAnimation** | Disable animation state | Animated.Value | No | iOS/Android | Yes | -| **focusAnimationDuration** | Focus animation duration in ms | Number | No | iOS/Android | Yes | -| **disableAnimationDuration** | Disable animation duration in ms | Number | No | iOS/Android | Yes | -| **disabled** | Button availability | Boolean | No | iOS/Android | Yes | -| **onPress** | Touch up callback | Function | No | iOS/Android | Yes | -| **payload** | Payload object for onPress callback | Any | No | iOS/Android | Yes | +| **color** | 按钮颜色 | String | 否 | iOS/Android | 是 | +| **disabledColor** | 按钮禁用状态的颜色 | String | 否 | iOS/Android | 是 | +| **shadeColor** | 按钮聚焦状态的阴影颜色 | String | 否 | iOS/Android | 是 | +| **shadeOpacity** | 按钮聚焦状态阴影透明度 | Number | 否 | iOS/Android | 是 | +| **shadeBorderRadius** | 按钮阴影圆角 | Number | 否 | iOS/Android | 是 | +| **focusAnimation** | 聚焦动画状态 | Animated.Value | 否 | iOS/Android | 是 | +| **disableAnimation** | 禁用状态动画状态 | Animated.Value | 否 | iOS/Android | 是 | +| **focusAnimationDuration** | 聚焦状态动画持续时间（毫秒） | Number | 否 | iOS/Android | 是 | +| **disableAnimationDuration** | 禁用状态动画持续时间（毫秒） | Number | 否 | iOS/Android | 是 | +| **disabled** | 按钮可用性 | Boolean | 否 | iOS/Android | 是 | +| **onPress** | 抬起回调 | Function | 否 | iOS/Android | 是 | +| **payload** | onPress 回调的负载对象 | Any | 否 | iOS/Android | 是 | ## 遗留问题 diff --git a/zh-cn/react-native-material-ui.md b/zh-cn/react-native-material-ui.md index 294eabfbac2a5b54011c88983d2567940b540326..01a4bddac6680c162148bb791c52720038a60961 100644 --- a/zh-cn/react-native-material-ui.md +++ b/zh-cn/react-native-material-ui.md @@ -15,15 +15,15 @@ > [!TIP] [Github 地址](https://github.com/xotahal/react-native-material-ui) -## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| Version | Package Name | Repository | Release | 支持RN版本 | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 1.30.1 | @react-native-oh-tpl/react-native-material-ui | [Github](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-material-ui%2F) | [Github Releases](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-material-ui%2Freleases) | 0.72 | +| 1.31.0 | @react-native-ohos/react-native-material-ui | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-material-ui) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-material-ui/releases) | 0.77 | -请到三方库的 Releases -发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.30.1 | [@react-native-oh-tpl/react-native-material-ui Releases](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-material-ui%2Freleases) | 0.72 | -| 1.30.1 | [@react-native-ohos/react-native-material-ui Releases]() | 0.77 | +## 安装与使用 对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 @@ -37,7 +37,7 @@ # V1.30.1 for RN0.72 npm install @react-native-oh-tpl/react-native-material-ui -# V1.30.1 for RN0.77 +# V1.31.0 for RN0.77 npm install @react-native-ohos/react-native-material-ui ``` @@ -47,7 +47,7 @@ npm install @react-native-ohos/react-native-material-ui # V1.30.1 for RN0.72 yarn add @react-native-oh-tpl/react-native-material-ui -# V1.30.1 for RN0.77 +# V1.31.0 for RN0.77 yarn add @react-native-ohos/react-native-material-ui ``` @@ -208,12 +208,10 @@ struct Index { 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +在以下版本验证通过： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.30.1 | [@react-native-oh-tpl/react-native-material-ui Releases](https://github.com/react-native-oh-library/react-native-material-ui/releases) | 0.72 | -| 1.30.1 | [@react-native-ohos/react-native-material-ui Releases]() | 0.77 | +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 6.0.0.868; ROM: 5.0.0.107; +2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 组件 diff --git a/zh-cn/react-native-pdf.md b/zh-cn/react-native-pdf.md index 13e9d842703ed022ddba39f72960fecbaf067091..ea3b3b8a916bba4184d5b0a926894b701a4602ef 100644 --- a/zh-cn/react-native-pdf.md +++ b/zh-cn/react-native-pdf.md @@ -14,9 +14,17 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-pdf) +请到三方库的 Releases 发布地址查看配套的版本信息： + +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 6.7.4 | @react-native-oh-tpl/react-native-pdf | [Github](https://github.com/react-native-oh-library/react-native-pdf) | [Github Releases](https://github.com/react-native-oh-library/react-native-pdf/releases) | 0.72 | +| 6.8.0 | @react-native-ohos/react-native-pdf | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-pdf) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-pdf/releases) | 0.77 | + + ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-pdf Releases](https://github.com/react-native-oh-library/react-native-pdf/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -25,13 +33,21 @@ #### **npm** ```bash +# V0.72 npm install @react-native-oh-tpl/react-native-pdf + +# V0.77 +npm install @react-native-ohos/react-native-pdf ``` #### **yarn** ```bash +# V0.72 yarn add @react-native-oh-tpl/react-native-pdf + +# V0.77 +yarn add @react-native-ohos/react-native-pdf ``` @@ -115,6 +131,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -122,6 +140,15 @@ const styles = StyleSheet.create({ } ``` +- V0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-pdf": "file:../../node_modules/@react-native-ohos/react-native-pdf/harmony/pdfview.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -157,7 +184,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V0.72 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-pdf/src/main/cpp" ./pdfview) + +# V0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-pdf/src/main/cpp" ./pdfview) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -198,8 +231,12 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... +// V0.72 + import { RTNPdfView, PDF_VIEW_TYPE } from '@react-native-oh-tpl/react-native-pdf'; +// V0.77 ++ import { RTNPdfView, PDF_VIEW_TYPE } from '@react-native-ohos/react-native-pdf'; + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... @@ -247,7 +284,10 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-pdf Releases](https://github.com/react-native-oh-library/react-native-pdf/releases) +在以下版本验证通过： + +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107; +2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性 @@ -255,71 +295,74 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | -------- | ------------- |-------------------| -| source | PDF source like {uri:xxx, cache:false}. see the following for detail. | object | YES | iOS / Android | yes | -| page | initial page index | number | NO | iOS / Android | yes | -| scale | should minScale<=scale<=maxScale | number | NO | iOS / Android | yes | -| minScale | min scale | number | NO | iOS / Android | yes | -| maxScale | max scale | number | NO | iOS / Android | yes | -| horizontal | draw page direction, if you want to listen the orientation change, you can use [[react-native-orientation-locker\]](https://github.com/react-native-oh-library/react-native-orientation-locker) | bool | NO | iOS / Android | no | -| showsHorizontalScrollIndicator | shows or hides the horizontal scroll bar indicator on iOS | bool | NO | iOS | no | -| showsVerticalScrollIndicator | shows or hides the vertical scroll bar indicator on iOS | bool | NO | iOS | no | -| fitWidth | if true fit the width of view, can not use fitWidth=true together with scale | bool | NO | iOS / Android | no | -| fitPolicy | 0:fit width, 1:fit height, 2:fit both(default) | number | NO | iOS / Android | yes | -| spacing | the breaker size between pages | number | NO | iOS / Android | yes | -| password | pdf password, if password error, will call OnError() with message "Password required or incorrect password." | string | NO | iOS / Android | yes | -| style | support normal view style, you can use this to set border/spacing color... | object | NO | iOS / Android | yes | -| renderActivityIndicator | when loading show it as an indicator, you can use your component | (progress) => Component | NO | iOS / Android | no | -| enableAntialiasing | improve rendering a little bit on low-res screens, but maybe course some problem on Android 4.4, so add a switch | bool | NO | iOS / Android | no | -| enablePaging | only show one page in screen | bool | NO | iOS / Android | no | -| enableRTL | scroll page as "page3, page2, page1" | bool | NO | iOS / Android | no | -| enableAnnotationRendering | enable rendering annotation, notice:iOS only support initial setting,not support realtime changing | bool | NO | iOS | no | -| enableDoubleTapZoom | Enable double tap to zoom gesture | bool | NO | iOS / Android | no | -| trustAllCerts | Allow connections to servers with self-signed certification | bool | NO | iOS / Android | no | -| singlePage | Only show first page, useful for thumbnail views | bool | NO | iOS / Android | no | -| onLoadProgress | callback when loading, return loading progress (0-1) | function(percent) | NO | iOS / Android | yes | -| onLoadComplete | callback when pdf load completed, return total page count, pdf local/cache path, {width,height} and table of contents | function(numberOfPages, path, {width, height}, tableContents) | NO | iOS / Android | partially | -| onPageChanged | callback when page changed ,return current page and total page count | function(page,numberOfPages) | NO | iOS / Android | yes | -| onError | callback when error happened | function(error) | NO | iOS / Android | yes | -| onPageSingleTap | callback when page was single tapped | function(page) | NO | iOS / Android | no | -| onScaleChanged | callback when scale page | function(scale) | NO | iOS / Android | yes | -| onPressLink | callback when link tapped | function(uri) | NO | iOS / Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ------------- | ----------------- | +| source | PDF 数据源配置，如 {uri:xxx, cache:false}，详情见下文说明 | object | YES | iOS / Android | yes | +| page | 初始页码索引 | number | NO | iOS / Android | yes | +| scale | 显示缩放比例，需满足 minScale<=scale<=maxScale | number | NO | iOS / Android | yes | +| minScale | 最小缩放值 | number | NO | iOS / Android | yes | +| maxScale | 最大缩放值 | number | NO | iOS / Android | yes | +| horizontal | 页面横向滚动，若需监听方向变化可配合 [[react-native-orientation-locker\]](https://github.com/react-native-oh-library/react-native-orientation-locker) | bool | NO | iOS / Android | no | +| showsHorizontalScrollIndicator | 控制 iOS 上横向滚动条指示器的显示与隐藏 | bool | NO | iOS | no | +| showsVerticalScrollIndicator | 控制 iOS 上纵向滚动条指示器的显示与隐藏 | bool | NO | iOS | no | +| fitWidth | 为 true 时内容自适应宽度，且不可与 scale 同时使用 | bool | NO | iOS / Android | no | +| fitPolicy | 0 表示按宽度适配，1 表示按高度，2 表示同时适配（默认） | number | NO | iOS / Android | yes | +| spacing | 各页之间的间距 | number | NO | iOS / Android | yes | +| password | PDF 密码，错误时会触发 onError 并提示 “Password required or incorrect password.” | string | NO | iOS / Android | yes | +| style | 常规 View 样式，可用于设置边框、间距颜色等 | object | NO | iOS / Android | yes | +| renderActivityIndicator | 加载过程中显示的自定义指示器组件 | (progress) => Component | NO | iOS / Android | no | +| enableAntialiasing | 在低分辨率屏幕上提升渲染质量（Android 4.4 可能出现问题） | bool | NO | iOS / Android | no | +| enablePaging | 仅在屏幕上显示一页 | bool | NO | iOS / Android | no | +| enableRTL | 以 “page3, page2, page1” 方式反向滚动 | bool | NO | iOS / Android | no | +| enableAnnotationRendering | 启用批注渲染，注意 iOS 仅支持初始设置，不支持实时切换 | bool | NO | iOS | no | +| enableDoubleTapZoom | 启用双击缩放手势 | bool | NO | iOS / Android | no | +| trustAllCerts | 允许连接使用自签名证书的服务器 | bool | NO | iOS / Android | no | +| singlePage | 仅展示第一页，适用于缩略图场景 | bool | NO | iOS / Android | no | +| onLoadProgress | 加载进度回调，返回 0-1 的进度值 | function(percent) | NO | iOS / Android | yes | +| onLoadComplete | PDF 加载完成回调，返回总页数、本地/缓存路径、尺寸以及目录 | function(numberOfPages, path, {width, height}, tableContents) | NO | iOS / Android | partially | +| onPageChanged | 翻页回调，返回当前页及总页数 | function(page,numberOfPages) | NO | iOS / Android | yes | +| onError | 发生错误时的回调 | function(error) | NO | iOS / Android | yes | +| onPageSingleTap | 页面被单击时的回调 | function(page) | NO | iOS / Android | no | +| onScaleChanged | 缩放变化时的回调 | function(scale) | NO | iOS / Android | yes | +| onPressLink | 点击 PDF 内链接时的回调 | function(uri) | NO | iOS / Android | yes | +| scrollEnabled6.7.7+ | 启用或禁用滚动 | bool | NO | iOS | yes | +| progressContainerStyle6.7.7+ | 进度容器的样式，可设置边框或间距颜色 | object | NO | iOS / Android | no | #### Source | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | --------------------------------------------- | ------ | -------- | ------------- | ----------------- | -| uri | see the following for detail. | object | YES | iOS / Android | yes | -| cache | use cache or not | bool | NO | iOS / Android | no | -| cacheFileName | specific file name for cached pdf file | string | NO | iOS / Android | no | -| expiration | cache file expired seconds (0 is not expired) | number | NO | iOS / Android | no | -| method | request method when uri is a url | string | NO | iOS / Android | no | -| headers | request headers when uri is a url | object | NO | iOS / Android | no | +| uri | 详细说明见下文 | object | YES | iOS / Android | yes | +| cache | 是否使用缓存 | bool | NO | iOS / Android | no | +| cacheFileName | 缓存 PDF 使用的文件名 | string | NO | iOS / Android | no | +| expiration | 缓存文件过期秒数（0 表示不过期） | number | NO | iOS / Android | no | +| method | 当 uri 为 URL 时的请求方法 | string | NO | iOS / Android | no | +| headers | 当 uri 为 URL 时的请求头 | object | NO | iOS / Android | no | #### Uri | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------- | ------------- | -------- | ------------- | ----------------- | -| {uri:"http://xxx/xxx.pdf"} | load pdf from a url | object | NO | iOS / Android | yes | -| {require("./test.pdf")} | load pdf relate to js file (do not need add by xcode) | require(path) | NO | iOS | yes | -| {uri:"bundle-assets://path/to/xxx.pdf"} | load pdf from assets, the file should be at Android/app/src/main/assets/path/to/xxx.pdf | object | NO | iOS | no | -| {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | load pdf from base64 string | object | NO | iOS / Android | no | -| {uri:"file:///absolute/path/to/xxx.pdf"} | load pdf from local file system | object | NO | iOS / Android | no | -| {uri:"ms-appx:///xxx.pdf"} | load pdf bundled with UWP app | object | NO | Windows | no | -| {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 | +| {uri:"http://xxx/xxx.pdf"} | 从 URL 加载 PDF | object | NO | iOS / Android | yes | +| {require("./test.pdf")} | 加载与 JS 文件关联的本地资源（无需在 Xcode 中额外添加） | require(path) | NO | iOS | yes | +| {uri:"bundle-assets://path/to/xxx.pdf"} | 从 Android 项目 assets 目录加载 PDF | object | NO | iOS | no | +| {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | 通过 Base64 字符串加载 PDF | object | NO | iOS / Android | no | +| {uri:"file:///absolute/path/to/xxx.pdf"} | 从本地文件系统加载 PDF | object | NO | iOS / Android | no | +| {uri:"ms-appx:///xxx.pdf"} | 从 UWP 应用内置资源加载 PDF | object | NO | Windows | no | +| {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | 通过 content URI 加载 PDF | object | NO | iOS | no | +| {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | 从 blob URL 加载 PDF | object | NO | Android | no | ## 静态方法 | 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 | yes | +| setPage | 设置 PDF 组件当前页。pageNumber 为正整数，若大于总页数则保持原页码不变。 | function(pageNumber) | NO | iOS / Android | yes | ## 遗留问题 - [ ] 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) +- [ ] V0.77 部分属性未实现 HarmonyOS 化: [issue#1](https://gitcode.com/openharmony-sig/rntpc_react-native-pdf/issues/1) ## 其他 diff --git a/zh-cn/react-native-sortable-list.md b/zh-cn/react-native-sortable-list.md index 341de2f8fefada185e67d58f987108eb4c2f264c..b089502d76ba8e802499db6333c2a577722b4175 100644 --- a/zh-cn/react-native-sortable-list.md +++ b/zh-cn/react-native-sortable-list.md @@ -15,14 +15,14 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-sortable-list) -## 安装与使用 - 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.0.25 | [@react-native-oh-tpl/react-native-sortabel-list Releases](https://github.com/react-native-oh-library/react-native-sortable-list/releases) | 0.72 | -| 0.0.26 | [@react-native-ohos/react-native-sortabel-list Releases]() | 0.77 | +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 0.0.25 | @react-native-oh-tpl/react-native-sortable-list | [Github](https://github.com/react-native-oh-library/react-native-sortable-list) | [Github Releases](https://github.com/react-native-oh-library/react-native-sortable-list/releases) | 0.72 | +| 0.1.0 | @react-native-ohos/react-native-sortable-list | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-sortable-list) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-sortable-list/releases) | 0.77 | + +## 安装与使用 进入到工程目录并输入以下命令： @@ -30,29 +30,19 @@ #### **npm** -v0.0.25 - ```bash +#v0.72 npm install @react-native-oh-tpl/react-native-sortable-list -``` - -v0.0.26 - -``` +#v0.77 npm install @react-native-ohos/react-native-sortable-list ``` #### **yarn** -v0.0.25 - ```bash +#v0.72 yarn add @react-native-oh-tpl/react-native-sortable-list -``` - -v0.0.26 - -``` +#v0.77 yarn add @react-native-ohos/react-native-sortable-list ``` @@ -254,41 +244,39 @@ const styles = StyleSheet.create({ 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +在以下版本验证通过： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.0.25 | [@react-native-oh-tpl/react-native-sortabel-list Releases](https://github.com/react-native-oh-library/react-native-sortable-list/releases) | 0.72 | -| 0.0.26 | [@react-native-ohos/react-native-sortabel-list Releases]() | 0.77 | +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107; +2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | **Type** | Required | Platform | HarmonyOS Support | +| 属性名 | 描述 | **类型** | 是否必填 | 支持平台 | HarmonyOS 支持 | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | -------- | -------- | ----------------- | -| data | data source | Object | yes | All | Yes | -| order | an array of keys from data, the order of keys from the array will be used to initial rows order | Array | no | All | Yes | -| style | View style | Object, Array | no | All | Yes | -| contentContainerStyle | these styles will be applied to the inner scroll view content container | Object, Array | no | All | Yes | -| innerContainerStyle | these styles will be applied to the inner scroll view content container, excluding the header and footer | Object, Array | no | All | Yes | -| horizontal | when true, the SortableList's children are arranged horizontally in a row instead of vertically in a column. The default value is false. | boolean | no | All | Yes | -| showsVerticalScrollIndicator | when false, the vertical scroll indicator will not be visible. The default value is true. | boolean | no | All | Yes | -| showsHorizontalScrollIndicator | when false, the horizontal scroll indicator will not be visible. The default value is true. | boolean | no | All | Yes | -| sortingEnabled | when false, rows are not sortable. The default value is true. | boolean | no | All | Yes | -| scrollEnabled | when false, the content does not scrollable. The default value is true. | boolean | no | All | Yes | -| keyboardShouldPersistTaps | Determines when the keyboard should stay visible after a tap. Default 'never'. | string | no | All | Yes | -| manuallyActivateRows | whether you intend to use the toggleRowActive method to activate a row or use the out of box solution. | bool | no | All | Yes | -| autoscrollAreaSize | determines the height for vertical list and the width for horizontal list of the area at the begining and the end of the list that will trigger autoscrolling. Defaults to 60. | number | no | All | Yes | -| rowActivationTime | determines time delay in ms before pressed row becomes active. Defaults to 200 ms. | number | no | All | Yes | -| refreshControl | A RefreshControl that works the same way as a ScrollView's refreshControl. | element | no | All | Yes | -| renderRow | Takes a row key, row index, data entry from the data source and its statuses disabled, active and should return a renderable component to be rendered as the row. | function | yes | All | Yes | -| renderHeader | Renders returned component at the top of the list. | function | no | All | Yes | -| renderFooter | Renders returned component at the bottom of the list. | function | no | All | Yes | -| onChangeOrder | Called when rows were reordered, takes an array of rows keys of the next rows order. | bool | no | All | Yes | -| onActivateRow | Called when a row was activated (user long tapped). | function | no | All | Yes | -| onReleaseRow | Called when the active row was released. Returns the key and the new list order. | function | no | All | Yes | -| onPressRow | Called when a row was pressed. | function | no | All | Yes | +| data | 数据源对象 | Object | 是 | 全平台 | 是 | +| order | data 中键值数组，该数组顺序将用于初始化行顺序 | Array | 否 | 全平台 | 是 | +| style | 外层 View 的样式 | Object, Array | 否 | 全平台 | 是 | +| contentContainerStyle | 应用于内部 ScrollView 内容容器的样式 | Object, Array | 否 | 全平台 | 是 | +| innerContainerStyle | 应用于内部 ScrollView 内容容器（不含头尾组件）的样式 | Object, Array | 否 | 全平台 | 是 | +| horizontal | 为 true 时按行横向排列子组件，默认为 false 纵向排列 | boolean | 否 | 全平台 | 是 | +| showsVerticalScrollIndicator | 为 false 时隐藏纵向滚动条，默认 true | boolean | 否 | 全平台 | 是 | +| showsHorizontalScrollIndicator | 为 false 时隐藏横向滚动条，默认 true | boolean | 否 | 全平台 | 是 | +| sortingEnabled | 为 false 时禁用排序功能，默认 true | boolean | 否 | 全平台 | 是 | +| scrollEnabled | 为 false 时禁用滚动，默认 true | boolean | 否 | 全平台 | 是 | +| keyboardShouldPersistTaps | 控制点击后键盘是否保持可见，默认值为 'never' | string | 否 | 全平台 | 是 | +| manuallyActivateRows | 是否通过 toggleRowActive 手动激活行而非内置方案 | bool | 否 | 全平台 | 是 | +| autoscrollAreaSize | 触发自动滚动的顶部/底部（或左右）区域尺寸，垂直列表为高度，水平列表为宽度，默认 60 | number | 否 | 全平台 | 是 | +| rowActivationTime | 行被长按后变为激活状态的延迟时间（毫秒），默认 200 | number | 否 | 全平台 | 是 | +| refreshControl | 与 ScrollView refreshControl 相同用法的下拉刷新组件 | element | 否 | 全平台 | 是 | +| renderRow | 接收行 key、索引、数据和状态（禁用/激活），返回一行要渲染的组件 | function | 是 | 全平台 | 是 | +| renderHeader | 渲染列表顶部头部组件 | function | 否 | 全平台 | 是 | +| renderFooter | 渲染列表底部尾部组件 | function | 否 | 全平台 | 是 | +| onChangeOrder | 行重新排序后回调，返回新的行 key 顺序数组 | bool | 否 | 全平台 | 是 | +| onActivateRow | 某一行被激活（长按）时触发 | function | 否 | 全平台 | 是 | +| onReleaseRow | 激活行释放时触发，返回该行 key 以及新的顺序 | function | 否 | 全平台 | 是 | +| onPressRow | 某一行被点击时触发 | function | 否 | 全平台 | 是 | ## 静态方法 @@ -296,11 +284,11 @@ const styles = StyleSheet.create({ > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | **Type** | Required | Platform | HarmonyOS Support | +| 属性名 | 描述 | **类型** | 是否必填 | 支持平台 | HarmonyOS 支持 | | -------------- | --------------------------------------------------------------------------- | -------------- | -------- | -------- | ----------------- | -| scrollBy | scrolls by a given y offset, either immediately or with a smooth animation. | dy?, animated? | no | All | Yes | -| scrollTo | scrolls to a given y offset, either immediately or with a smooth animation. | y?, animated? | no | All | Yes | -| scrollToRowKey | scrolls to a given row key, either immediately or with a smooth animation. | key, animated? | no | All | Yes | +| scrollBy | 按给定纵向偏移滚动，可立即执行或平滑动画执行 | dy?, animated? | 否 | 全平台 | 是 | +| scrollTo | 滚动到指定纵向偏移，可立即执行或平滑动画执行 | y?, animated? | 否 | 全平台 | 是 | +| scrollToRowKey | 滚动到指定行 key，可立即执行或平滑动画执行 | key, animated? | 否 | 全平台 | 是 | ## 遗留问题