diff --git a/en/bam-tech-react-native-image-resizer.md b/en/bam-tech-react-native-image-resizer.md index 2ac00bbcc6add82662855775bb096ee37f6d6abf..2cab0a1e8432e4e360ac3b61aedd15e08b070fb2 100644 --- a/en/bam-tech-react-native-image-resizer.md +++ b/en/bam-tech-react-native-image-resizer.md @@ -15,31 +15,44 @@ > [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-image-resizer) -## Installation and Usage +Please go to the Releases page of the third-party library to check the compatible version information: + +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 3.0.9 | @react-native-oh-tpl/react-native-image-resizer | [Github](https://github.com/react-native-oh-library/react-native-image-resizer) | [Github Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases) | 0.72 | +| 3.1.0 | @react-native-ohos/react-native-image-resizer | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-image-resizer) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-resizer/releases) | 0.77 | -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-image-resizer Releases](https://github.com/react-native-oh-library/react-native-image-resizer/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 enter the following command: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-image-resizer + +# 0.77 +npm install @react-native-ohos/react-native-image-resizer ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-image-resizer + +# 0.77 +yarn add @react-native-ohos/react-native-image-resizer ``` The following code shows the basic use scenario of the repository: -> [!WARNING] The name of the imported repository remains unchanged. +> [!WARNING] The name of the imported library remains unchanged. ```tsx import React, { useRef, useState } from 'react'; @@ -270,13 +283,15 @@ export default ImageResizerDemo; ## 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] 0.77 does not require Codegen + +This library has been adapted for `Codegen`. Before using it, you need to proactively generate the bridge code for the third-party library. For details, please refer to the [Codegen Usage Documentation](/en/codegen.md). ## Link Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -Open the `harmony` directory of the HarmonyOS project in DevEco Studio. +First, use DevEco Studio to open the HarmonyOS project `harmony` in the project directory. ### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project @@ -293,12 +308,16 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. Currently, two methods are available: +1. Import via har package (this method will be deprecated after the IDE improves related functions; currently the preferred method); +2. Directly link to the source code. + +Method 1 (recommended): Import via har package -Method 1 (recommended): Use the HAR file. +> [!TIP] The har package is located in the `harmony` folder under the third-party library installation path. -> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. +Open `entry/oh-package.json5` and add the following dependencies: -Open `entry/oh-package.json5` file and add the following dependencies: +0.72 ```json "dependencies": { @@ -307,26 +326,38 @@ 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-image-resizer": "file:../../node_modules/@react-native-ohos/react-native-image-resizer/harmony/image_resizer.har" + } +``` + Click the `sync` button in the upper right corner. -Alternatively, run the following instruction on the terminal: +Alternatively, run the following command in the terminal: ```bash cd entry ohpm install ``` -Method 2: Directly link to the source code. +Method 2: Directly link to the source code -> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). +> [!TIP] If you need to directly link to the source code, please refer to [Direct Source Code Linking Instructions](/en/link-source-code.md). -### 3. Configuring CMakeLists and Introducing ImageResizerPackage +### 3. Introducing ImageResizerPackage in ArkTs -Open `entry/src/main/ets/RNPackagesFactory.ts` and add the following code: +Open `entry/src/main/ets/RNPackagesFactory.ts` and add: ```diff ... + //0.72 + import {ImageResizerPackage} from '@react-native-oh-tpl/react-native-image-resizer/ts'; + //0.77 ++ import {ImageResizerPackage} from '@react-native-ohos/react-native-image-resizer/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -336,27 +367,85 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Running +### 4. Configuring CMakeLists and Introducing ImageResizerPackage + +> 0.77 requires configuring CMakeLists and introducing ImageResizerPackage. + +Open `entry/src/main/cpp/CMakeLists.txt` and add: + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +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") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_END: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-image-resizer/src/main/cpp" ./image-resizer) + +# RNOH_END: manual_package_linking_1 + +add_library(rnoh_app SHARED + "./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_ImageResizer) +# RNOH_BEGIN: manual_package_linking_2 +``` + +> [!Tip] Note: The NODE_MODULES definition above is the installation path of the source library. Users can define NODE_MODULES according to the path where the source library is installed. + +Open `entry/src/main/cpp/PackageProvider.cpp` and add: + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "ImageResizerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 5. Running Click the `sync` button in the upper right corner. -Alternatively, run the following instruction on the terminal: +Alternatively, run the following command in the terminal: ```bash cd entry ohpm install ``` -Then build and run the code. +Then compile and run. -## Constraints +> [!TIP] This library also depends on [[@react-native-oh-tpl/react-native-image-picker](https://github.com/react-native-oh-library/usage-docs/blob/master/en/react-native-image-picker.md)]. If this library has already been introduced in the HarmonyOS project, you can skip the steps in this chapter and use it directly. -### Compatibility +If not introduced, please refer to the Link section of [[@react-native-oh-tpl/react-native-image-picker](https://github.com/react-native-oh-library/usage-docs/blob/master/en/react-native-image-picker.md)](https://github.com/react-native-oh-library/usage-docs/blob/master/en/react-native-image-picker.md#link) for introduction. -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. +## Constraints -Check the release version information in the release address of the third-party library:[@react-native-oh-tpl/react-native-image-resizer Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases) +### Compatibility +This document is verified based on the following versions: +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); 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 @@ -372,7 +461,7 @@ Check the release version information in the release address of the third-party | Name | Description | Type | Platform | HarmonyOS Support | |----------------------|---------------------|---------|-------------|-------------------| -| path | Path of image file, or a base64 encoded image string prefixed with 'data:image/imagetype' where imagetype is jpeg or png. | string | Android/iOS | Yes | +| imageUri | Path of image file, or a base64 encoded image string prefixed with 'data:image/imagetype' where imagetype is jpeg or png. | string | Android/iOS | Yes | | width | Width to resize to (see mode for more details) | number | Android/iOS | Yes | | height | Height to resize to (see mode for more details) | number | Android/iOS | Yes | | compressFormat | Can be either JPEG, PNG or WEBP. | string | Android/iOS | Yes | diff --git a/en/react-native-clipboard-clipboard.md b/en/react-native-clipboard-clipboard.md index 288e4b8154320bf236269bb69bfbe3156d5ee4d3..d1b1afc197ae6f64a40e5f81983bd18acab917ab 100644 --- a/en/react-native-clipboard-clipboard.md +++ b/en/react-native-clipboard-clipboard.md @@ -14,26 +14,37 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/clipboard/tree/sig) -## Installation and Usage - -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/clipboard Releases](https://github.com/react-native-oh-library/clipboard/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. +Please check the matching version information at the Releases page of the third-party library: -Go to the project directory and execute the following instruction: +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 1.13.2 | @react-native-oh-tpl/clipboard | [Github](https://github.com/react-native-oh-library/clipboard) | [Github Releases](https://github.com/react-native-oh-library/clipboard/releases) | 0.72 | +| 1.16.3 | @react-native-ohos/clipboard | [GitCode](https://gitcode.com/openharmony-sig/rntpc_clipboard) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_clipboard/releases) | 0.77 | +## Installation and Usage +Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/clipboard + +# 0.77 +npm install @react-native-ohos/clipboard ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/clipboard + +# 0.77 +yarn add @react-native-ohos/clipboard ``` @@ -42,6 +53,8 @@ The following code shows the basic use scenario of the repository: > [!WARNING] The name of the imported repository remains unchanged. +#### **For RN0.72** + ```js import Clipboard from "@react-native-clipboard/clipboard"; @@ -74,6 +87,55 @@ const App = () => { export default App; ``` +**For RN0.77** + +```js +import React, { useState } from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import Clipboard from "@react-native-clipboard/clipboard"; + +const App = () => { + const [copiedText, setCopiedText] = useState(""); + + const copyToClipboard = () => { + Clipboard.setString("hello world"); + }; + + const fetchCopiedText = async () => { + const text = await Clipboard.getString(); + setCopiedText(text); + }; + + return ( + + + Click here to copy to Clipboard + + + View copied text + + + {copiedText} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + padding: 20, + }, + copiedText: { + marginTop: 20, + fontSize: 18, + }, +}; + +export default App; +``` + ## Link Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. @@ -95,11 +157,16 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. Currently, two methods are available: -Method 1 (recommended): Use the HAR file. +1. Introduce via har package (this method will be deprecated after the IDE improves related functions, currently the preferred method); +2. Directly link to the source code. + +Method 1: Introduce via har package + +> [!TIP] The har package is located in the [harmony] folder in the third-party library installation path. -> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. +Open `entry/oh-package.json5` and add the following dependencies: -Open `entry/oh-package.json5` file and add the following dependencies: +- 0.72 ```json "dependencies": { @@ -109,6 +176,16 @@ 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/clipboard": "file:../../node_modules/@react-native-ohos/clipboard/harmony/clipboard.har" + } +``` + Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -144,7 +221,13 @@ 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/clipboard/src/main/cpp" ./clipboard) + +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/clipboard/src/main/cpp" ./clipboard) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -188,8 +271,13 @@ Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following co ```diff import type {RNPackageContext, RNPackage} from 'rnoh/ts'; import {SamplePackage} from 'rnoh-sample-package/ts'; + +// 0.72 + import {ClipboardPackage} from '@react-native-oh-tpl/clipboard/ts'; +// 0.77 ++ import {ClipboardPackage} from '@react-native-ohos/clipboard/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -216,15 +304,22 @@ Then build and run the code. ### Compatibility +This document is verified based on the following versions: + +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; + 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/clipboard Releases](https://github.com/react-native-oh-library/clipboard/releases) ### Permission Requirements -> [!TIP] "ohos.permission.READ_PASTEBOARD"权限等级为system_basic，授权方式为user_grant，[使用 ACL 签名的配置指导](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/signing-0000001587684945-V3#section157591551175916) +> [!TIP] The "ohos.permission.READ_PASTEBOARD" permission level is system_basic, and the authorization method is user_grant. [Configuration Guide for Using ACL Signature](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/signing-0000001587684945-V3#section157591551175916) + +#### Add permissions in the module.json5 file under the entry directory -1. Include applicable permissions in the module.json5 file within the entry directory. +Open `entry/src/main/module.json5` and add the following code: ```diff ... @@ -242,9 +337,9 @@ Check the release version information in the release address of the third-party ] ``` -2. Apply the reasons for applicable permission in the entry directory. +#### Add the reason for requesting clipboard permissions under the entry directory -Open the `entry/src/main/resources/base/element/string.json` file and add the following code: +Open `entry/src/main/resources/base/element/string.json` and add the following code: ```diff ... @@ -258,7 +353,7 @@ Open the `entry/src/main/resources/base/element/string.json` file and add the fo } ``` -## Properties +## API > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. diff --git a/en/react-native-community-geolocation.md b/en/react-native-community-geolocation.md index 23a617e2e4d6d5c13be71a240cbeae24079837da..55d41be322102d7f7aea9ba5dec1a46a8414ac6b 100644 --- a/en/react-native-community-geolocation.md +++ b/en/react-native-community-geolocation.md @@ -14,26 +14,37 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-geolocation/tree/sig) -## Installation and Usage - -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/geolocation Releases](https://github.com/react-native-oh-library/react-native-geolocation/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. +Please check the matching version information at the Releases page of the third-party library: -Go to the project directory and execute the following instruction: +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 3.1.0 | @react-native-oh-tpl/geolocation | [Github](https://github.com/react-native-oh-library/react-native-geolocation) | [Github Releases](https://github.com/react-native-oh-library/react-native-geolocation/releases) | 0.72 | +| 3.4.1 | @react-native-ohos/react-native-geolocation | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-geolocation) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-geolocation/releases) | 0.77 | +## Installation and Usage +Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/geolocation + +# 0.77 +npm install @react-native-ohos/geolocation ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/geolocation + +# 0.77 +yarn add @react-native-ohos/geolocation ``` @@ -83,12 +94,17 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. Currently, two methods are available: -Method 1 (recommended): Use the HAR file. +1. Introducing via har package (this method will be deprecated after IDE improves related functions, currently the preferred method); +2. Directly linking source code. + +Method 1: Introducing via har package (recommended) -> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. +> [!TIP] The har package is located in the `harmony` folder under the third-party library installation path. Open `entry/oh-package.json5` file and add the following dependencies: +- 0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -96,6 +112,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/geolocation": "file:../../node_modules/@react-native-ohos/geolocation/harmony/geolocation.har" + } +``` + Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -131,7 +156,13 @@ 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/geolocation/src/main/cpp" ./geolocation) + +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/geolocation/src/main/cpp" ./geolocation) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -173,8 +204,12 @@ Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following co ```diff ... +// 0.72 + import {GeoLocationPackage} from '@react-native-oh-tpl/geolocation/ts'; +// 0.77 ++ import {GeoLocationPackage} from '@react-native-ohos/geolocation/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -200,9 +235,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. +Verified on the following versions: -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/geolocation Releases](https://github.com/react-native-oh-library/react-native-geolocation/releases) +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); 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; ### Permission Requirements @@ -257,19 +293,19 @@ Open the `entry/src/main/resources/base/element/string.json` file and add the fo } ``` -## Properties +## API > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | Notes | -| -------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------- | -------- | ----------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| setRNConfiguration | Sets configuration options that will be used in all location requests | function(config) | NO | iOS Android | partially | config only supports skipPermissionRequests | -| requestAuthorization | Request suitable Location permission | function(success,error) | YES | iOS Android | partially | error: Only code and message are supported. | -| getCurrentPosition | Invokes the success callback once with the latest location info | function(success(position),error(error),option) | NO | iOS Android | partially | In position, only altitudeAccuracy is not supported. In option, only timeout and maximumAge are supported. In error, only code and message are supported. | +| Name | Description | Type | Required | Platform | HarmonyOS Support | Notes | +| -------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------- | -------- | ----------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| setRNConfiguration | Sets configuration options that will be used in all location requests | function(config) | NO | iOS Android | partially | config only supports skipPermissionRequests | +| requestAuthorization | Request suitable Location permission | function(success,error) | YES | iOS Android | partially | error: Only code and message are supported. | +| getCurrentPosition | Invokes the success callback once with the latest location info | function(success(position),error(error),option) | NO | iOS Android | partially | In position, only altitudeAccuracy is not supported. In option, only timeout and maximumAge are supported. In error, only code and message are supported. | | watchPosition | Invokes the success callback whenever the location changes. Returns a watchId (number) | function(success(postion),error(error),option) | NO | iOS Android | partially | In position, only altitudeAccuracy is not supported. In error, only code and message are supported. In option, only interval and distanceFilter are supported. | -| clearWatch | Clears watch observer by id returned by watchPosition() | function(watchID) | NO | iOS Android | yes | watchID supports only the default value 0. | +| clearWatch | Clears watch observer by id returned by watchPosition() | function(watchID) | NO | iOS Android | yes | watchID supports only the default value 0. | ## Known Issues @@ -279,4 +315,4 @@ Open the `entry/src/main/resources/base/element/string.json` file and add the fo ## License -This project is licensed under [The MIT License(MIT)](https://github.com/michalchudziak/react-native-geolocation/blob/master/LICENSE). +This project is licensed under [The MIT License(MIT)](https://github.com/michalchudziak/react-native-geolocation/blob/master/LICENSE). \ No newline at end of file diff --git a/en/react-native-confirmation-code-field.md b/en/react-native-confirmation-code-field.md index 75e1c09dfb6dc2ea77b547bd6bf77ae86734ebad..53826a3ba2be60754daf24b0b261ded0c2fe7676 100644 --- a/en/react-native-confirmation-code-field.md +++ b/en/react-native-confirmation-code-field.md @@ -14,18 +14,35 @@ > [!TIP] [Github address](https://github.com/retyui/react-native-confirmation-code-field) +Please go to the Releases page of the third-party library to check the version information: + +| Third Party Library Version | Supported RN Version | +| --------------------------- | -------------------- | +| 7.3.2 | 0.72 | +| 8.0.0 | 0.77 | + ## Installation and Usage +Go to the project directory and enter the following commands: + #### **npm** ```bash +# 0.72 npm install react-native-confirmation-code-field@7.3.2 + +# 0.77 +npm install react-native-confirmation-code-field@8.0.0 ``` #### **yarn** ```bash +# 0.72 yarn add react-native-confirmation-code-field@7.3.2 + +# 0.77 +yarn add react-native-confirmation-code-field@8.0.0 ``` @@ -112,11 +129,11 @@ This document is verified based on the following versions: 1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：205.0.0.18; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; -## component +## API -> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. +> [!TIP] The "Platform" column indicates the platform where the component is supported in the original third-party library. -> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. +> [!TIP] The "HarmonyOS Support" column of "yes" means that the HarmonyOS platform supports the component; "no" means not supported; "partially" means partial support. The usage method is consistent across platforms, and the effect is aligned with the iOS or Android effect. | Name | Description | Type | Platform | HarmonyOS Support | | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------- | ----------------- | @@ -125,9 +142,9 @@ This document is verified based on the following versions: ## CodeField Properties -> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. +> [!TIP] The "Platform" column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. +> [!TIP] The "HarmonyOS Support" column of "yes" means that the HarmonyOS platform supports the property; "no" means not supported; "partially" means partial support. The usage method is consistent across platforms, and the effect is aligned with the iOS or Android effect. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | -------- | ----------------- | @@ -141,9 +158,9 @@ This document is verified based on the following versions: ## Hooks -> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. +> [!TIP] The "Platform" column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. +> [!TIP] The "HarmonyOS Support" column of "yes" means that the HarmonyOS platform supports the property; "no" means not supported; "partially" means partial support. The usage method is consistent across platforms, and the effect is aligned with the iOS or Android effect. | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -------- | -------- | ----------------- | diff --git a/en/react-native-file-access.md b/en/react-native-file-access.md index d675832a931645fc20716a7d6e0ff1abe5dd5cf7..ba02ebcbc187f6e2dd2cb6f0bc01134d42fe1dda 100644 --- a/en/react-native-file-access.md +++ b/en/react-native-file-access.md @@ -14,9 +14,14 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-file-access) -## Installation and Usage +Please check the matching version information at the release address of the third-party library: + +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 3.1.0 | @react-native-oh-tpl/react-native-file-access | [Github](https://github.com/react-native-oh-library/react-native-file-access) | [Github Releases](https://github.com/react-native-oh-library/react-native-file-access/releases) | 0.72 | +| 3.2.0 | @react-native-ohos/react-native-file-access | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-file-access) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-file-access/releases) | 0.77 | -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-file-access Releases](https://github.com/react-native-oh-library/react-native-file-access/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: @@ -25,13 +30,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-file-access + +# 0.77 +npm install @react-native-ohos/react-native-file-access ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-file-access + +# 0.77 +yarn add @react-native-ohos/react-native-file-access ``` @@ -40,7 +53,7 @@ The following code shows the basic use scenario of the repository: > [!WARNING] The name of the imported repository remains unchanged. -> [!TIP] 以下 demo 中使用的是本地文件。 +> [!TIP] The following demo uses local files. ```js import React, { useEffect, useState } from 'react'; @@ -63,20 +76,24 @@ export function FileAccessDemo() { const [concatBeyts, setConcatBeyts] = useState(); const [dirOrNot, setDirOrNot] = useState(''); + // Write content to a file const wirteFile = () => { - FileSystem.writeFile(Dirs.DocumentDir + '/0801' + '/text1.txt', "DDDD", "utf8") + FileSystem.writeFile(Dirs.DocumentDir + '/0801.txt', "DDDD", "utf8") }; + // Read the content of a file const readFile = () => { FileSystem.readFile(Dirs.DocumentDir + "/0801.txt").then((res) => { setFileContent(res); }) }; + // Delete a file const unlink = () => { - FileSystem.unlink(Dirs.DocumentDir + '/0812.txt'); + FileSystem.unlink(Dirs.DocumentDir + '/0801.txt'); }; + // Create a new directory, returning the path of the created directory const mkdir = () => { FileSystem.mkdir(Dirs.DocumentDir + "/wxwx").then((res) => { setMkdirParam(res); @@ -85,14 +102,17 @@ export function FileAccessDemo() { }); }; + // Move a file const mv = () => { - FileSystem.mv(Dirs.DocumentDir + "/text.txt", Dirs.DocumentDir + "/text1.txt"); + FileSystem.mv(Dirs.DocumentDir + "/0801.txt", Dirs.DocumentDir + "/text1.txt"); }; + // Extract a zip archive const unzip = () => { FileSystem.unzip(Dirs.DocumentDir + "/wxwx.zip", Dirs.DocumentDir); }; + // Read file metadata const stat = () => { FileSystem.stat(Dirs.DocumentDir + "/text1.txt").then((res) => { setStatInfo(JSON.stringify(res)); @@ -101,6 +121,7 @@ export function FileAccessDemo() { }) }; + // Check if a path exists const exists = () => { FileSystem.exists(Dirs.DocumentDir + "/text1.txt").then((res) => { setExists(res); @@ -109,10 +130,12 @@ export function FileAccessDemo() { }); }; + // Copy a file const cp = async () => { await FileSystem.cp(Dirs.DocumentDir + "/text1.txt", Dirs.DocumentDir + "/text4.txt") }; + // Hash the file content const hash = () => { FileSystem.hash(Dirs.DocumentDir + "/text1.txt", 'SHA-256').then((res) => { setHashValue(res); @@ -121,11 +144,13 @@ export function FileAccessDemo() { }); }; + // Check if a path is a directory const isDir = async () => { let res = await FileSystem.isDir(Dirs.DocumentDir + '/text1.txt'); setDirOrNot(res); }; + // List files in a directory const ls = async () => { await FileSystem.ls(Dirs.DocumentDir).then((res) => { setLsList(res.join('、')); @@ -134,6 +159,7 @@ export function FileAccessDemo() { }); }; + // Check device available space const df = async () => { await FileSystem.df().then(res => { setFreeSize(res?.internal_free); @@ -141,6 +167,7 @@ export function FileAccessDemo() { }) }; + // Read metadata of all files in a directory const statDir = () => { FileSystem.statDir(Dirs.DocumentDir).then(res => { setStatDirInfo(res); @@ -149,18 +176,21 @@ export function FileAccessDemo() { }); }; + // Read a chunk of the content of a file, starting from byte at offset, reading for length bytes const readFileChunk = () => { - FileSystem.readFileChunk(Dirs.DocumentDir + "/text2.txt", 1, 1, 'utf8').then((res) => { + FileSystem.readFileChunk(Dirs.DocumentDir + "/text1.txt", 1, 1, 'utf8').then((res) => { setReadFileChunkInfo(res); }).catch((error) => { console.log(error, 'error') }); }; + // Append content to a file const appendFile = async () => { await FileSystem.appendFile(Dirs.DocumentDir + "/text3.txt", "AAAAAA", 'utf8'); } + // Append a file to another file. Returns number of bytes written const concatFiles = async () => { await FileSystem.concatFiles(Dirs.DocumentDir + "/text3.txt", Dirs.DocumentDir + "/text4.txt").then((res) => { setConcatBeyts(res) @@ -234,8 +264,8 @@ export function FileAccessDemo() { FileAccess.df() - available space: {freeSize ? (freeSize / (1024 * 1024 * 1024)).toFixed(2) : ''}GB - total space: {totalSize ? (totalSize / (1024 * 1024 * 1024)).toFixed(2) : ''}GB + available space: {freeSize ? (freeSize / (1000 * 1000 * 1000)).toFixed(2) : ''}GB + total space: {totalSize ? (totalSize / (1000 * 1000 * 1000)).toFixed(2) : ''}GB @@ -301,6 +331,8 @@ const styles = StyleSheet.create({ ## Use Codegen +> [!] Codegen is not required for V0.77. + 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). ## Link @@ -330,6 +362,8 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: +- 0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -337,6 +371,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-file-access": "file:../../node_modules/@react-native-ohos/react-native-file-access/harmony/file_access.har" + } +``` + Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -350,7 +393,71 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Introducing RNFileAccessPackage to ArkTS +### 3. Configuring CMakeLists and Introducing RNFileAccessPackage + +> [!TIP] CMakeLists configuration and RNFileAccessPackage introduction are required for V3.1.2. + +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_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@rnoh/react-native-openharmony/src/main/cpp") +set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated") +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(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") + +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +# (VM) Define a variable and assign it to the current module's cpp directory +set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR}) + +# Add the Header File directory, including cpp, cpp/include, and tell cmake to find the Header Files introduced by the code here +include_directories(${NATIVERENDER_ROOT_PATH} + ${NATIVERENDER_ROOT_PATH}/include) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-file-access/src/main/cpp" ./file_access) +# RNOH_BEGIN: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "${CMAKE_CURRENT_SOURCE_DIR}/generated/*.cpp") # this line is needed by codegen v1 + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) ++ target_link_libraries(rnoh_app PUBLIC rnoh_file_access) + +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" ++ #include "RNFileAccessPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) +{ + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4. Introducing RNFileAccessPackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: @@ -383,9 +490,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. +Verified on the following versions: -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-file-access Releases](https://github.com/react-native-oh-library/react-native-file-access/releases) +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); 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-image-header-scroll-view.md b/en/react-native-image-header-scroll-view.md index a89cd2c6416d0260d3fd01b306dc6458942c1d2a..3bb1247bce7e6b88fcf3d47042b0e85f8caa88a1 100644 --- a/en/react-native-image-header-scroll-view.md +++ b/en/react-native-image-header-scroll-view.md @@ -12,16 +12,16 @@

- - - - > [!TIP] [Github address](https://github.com/bamlab/react-native-image-header-scroll-view) -## Installation and Usage +Please go to the Releases page of the third-party library to check the compatible version information: +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 0.10.3 | @react-native-oh-tpl/react-native-image-header-scroll-view | [Github](https://github.com/react-native-oh-library/react-native-image-header-scroll-view) | [Github Releases](https://github.com/react-native-oh-library/react-native-image-header-scroll-view/releases) | 0.72 | +| 1.1.0 | @react-native-ohos/react-native-image-header-scroll-view | [Github](https://github.com/bamlab/react-native-image-header-scroll-view) | [Github Releases](https://github.com/bamlab/react-native-image-header-scroll-view/releases) | 0.77 | -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-image-header-scroll-view Releases](https://github.com/react-native-oh-library/react-native-image-header-scroll-view/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: @@ -30,13 +30,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-image-header-scroll-view + +# 0.77 +npm install @react-native-ohos/react-native-image-header-scroll-view ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-image-header-scroll-view + +# 0.77 +yarn add @react-native-ohos/react-native-image-header-scroll-view ``` @@ -155,6 +163,7 @@ function HeaderImageExample () { useNativeDriver: true, }).start(); } else { + // If current is not visible, execute fade out animation Animated.timing(fadeAnim, { toValue: 0, duration: 100, @@ -228,9 +237,10 @@ export default HeaderImageExample; ### 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. +Verified on the following versions: -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-image-header-scroll-view Releases](https://github.com/react-native-oh-library/react-native-image-header-scroll-view/releases) +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## API @@ -291,8 +301,8 @@ Check the release version information in the release address of the third-party ## Known Issues ## Others -- foregroundExtrapolate属性无法生效，与Android、iOS一致：[issue#2](https://github.com/bamlab/react-native-image-header-scroll-view/issues/132 )。 -- ScrollViewComponent属性无法滚动，与Android、iOS一致：[issue#3](https://github.com/bamlab/react-native-image-header-scroll-view/issues/133 )。 +- The foregroundExtrapolate property does not take effect, consistent with Android and iOS: [issue#2](https://github.com/bamlab/react-native-image-header-scroll-view/issues/132). +- The ScrollViewComponent property cannot scroll, consistent with Android and iOS: [issue#3](https://github.com/bamlab/react-native-image-header-scroll-view/issues/133). diff --git a/en/react-native-image-viewing.md b/en/react-native-image-viewing.md index 995bceac93ed6d9d3584d9bbb18ad740100d436d..038d8add03a66c7cfecad082b2737a58b5f8d8b6 100644 --- a/en/react-native-image-viewing.md +++ b/en/react-native-image-viewing.md @@ -14,28 +14,37 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-image-viewing) -## Installation and Usage - -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-image-viewing Releases](https://github.com/react-native-oh-library/react-native-image-viewing/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. +Find the matching version information in the release address of a third-party library: -Go to the project directory and execute the following instruction: +| Version | Package Name | Repository | Release | Supported RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------------------- | +| 0.2.2 | @react-native-oh-tpl/react-native-image-viewing | [Github](https://github.com/react-native-oh-library/react-native-image-viewing) | [Github Releases](https://github.com/react-native-oh-library/react-native-image-viewing/releases) | 0.72 | +| 0.3.0 | @react-native-ohos/react-native-image-viewing | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-image-viewing) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-viewing/releases) | 0.77 | +## Installation and Usage +Go to the project directory and execute the following instruction: -Go to the project directory and execute the following instruction: - #### npm ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-image-viewing + +# 0.77 +npm install @react-native-ohos/react-native-image-viewing ``` #### yarn ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-image-viewing + +# 0.77 +yarn add @react-native-ohos/react-native-image-viewing ``` quick use: @@ -189,15 +198,16 @@ const styles = StyleSheet.create({ ### 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. +The following versions have been verified: -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-image-viewing Releases](https://github.com/react-native-oh-library/react-native-image-viewing/releases) +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; -## Properties +## API -> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. +> [!TIP] The "Platform" column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. +> [!TIP] If the value of "HarmonyOS Support" is yes, it means that the HarmonyOS platform supports this property; no means the opposite; partially means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. | Name | Description | Type | Platform | Required | HarmonyOS Support | | ---------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------- | -------- | ----------------- | diff --git a/en/react-native-localize.md b/en/react-native-localize.md index 8bf63964ef534de456b41cb2348f8deb3de414d0..8a1e6275f3788c2f6548f24db5c262d461617c22 100644 --- a/en/react-native-localize.md +++ b/en/react-native-localize.md @@ -14,17 +14,16 @@ > [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-localize) -This third-party library has been migrated to Gitcode and is now available for direct download from npm, the new package name is: `@react-native-ohos/react-native-localize`, After introducing the new version of the third-party library, The version correspondence details are as follows: +Find the matching version information in the release address of a third-party library: -| Version | Package Name | Repository | Release | -| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| <= 3.1.0-0.0.1@deprecated | @react-native-oh-tpl/react-native-localize | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-localize) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-localize/releases) | -| > 3.1.0 | @react-native-ohos/react-native-localize | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-localize) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-localize/releases) | +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------------------- | +| <= 3.1.0-0.0.1@deprecated | @react-native-oh-tpl/react-native-localize | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-localize) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-localize/releases) | 0.72 | +| 3.1.0 | @react-native-ohos/react-native-localize | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-localize) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-localize/releases) | 0.72 | +| 3.4.2 | @react-native-ohos/react-native-localize | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-localize) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-localize/releases) | 0.77 | ## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-ohos/react-native-localize Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-localize/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 execute the following instruction: @@ -123,16 +122,18 @@ export default LocalizeDemo; Version > @react-native-ohos/react-native-localize@3.1.0, compatible with codegen-lib for generating bridge code. -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). +This repository has been adapted to `Codegen`. You need to actively execute the generation of third-party library bridge code before using it. For details, see [Codegen Usage Guide](/en/codegen.md). + +**Note:** 0.77 does not require Codegen execution. ## Link -Version > @react-native-ohos/react-native-localize@3.1.0 now supports Autolink without requiring manual configuration, currently only supports 72 frameworks. +Version > @react-native-ohos/react-native-localize@3.1.0 now supports Autolink without requiring manual configuration. Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md -Currently, Version <= @react-native-oh-tpl/react-native-localize@3.1.0-0.0.1@deprecated does not support AutoLink. Therefore, you need to manually configure the linking. +Version <= @react-native-oh-tpl/react-native-localize@3.1.0-0.0.1@deprecated does not support AutoLink. Therefore, you need to manually configure the linking. -Open the `harmony` directory of the HarmonyOS project in DevEco Studio. +First, open the `harmony` directory of the HarmonyOS project in DevEco Studio. ### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project @@ -156,6 +157,17 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: +- 0.72 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-localize": "file:../../node_modules/@react-native-oh-tpl/react-native-localize/harmony/rn_localize.har" + } +``` + +- 0.77 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -176,13 +188,61 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Introducing RNLocalizePackage to ArkTS +### 3. Configuring CMakeLists and Introducing RNLocalizePackage (Only for 0.77) + +```diff +... + +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_END: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-localize/src/main/cpp" ./rn_localize) +# RNOH_END: manual_package_linking_1 + +add_library(rnoh_app SHARED + "./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_localize) +# RNOH_BEGIN: manual_package_linking_2 +``` + +Open the `entry/src/main/cpp/PackageProvider.cpp` file and add: + +```diff +#include "RNOH/PackageProvider.h" ++ #include "RNLocalizePackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { ++ std::make_shared(ctx) +} +``` + +### 4. Introducing RNLocalizePackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... - +// 0.72 ++ import { RNLocalizePackage } from '@react-native-oh-tpl/react-native-localize/ts'; + +// 0.77 + import { RNLocalizePackage } from '@react-native-ohos/react-native-localize/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -193,7 +253,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Running +### 5. Running Click the `sync` button in the upper right corner. @@ -210,9 +270,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. +The following versions have been verified: -Check the release version information in the release address of the third-party library: [@react-native-ohos/react-native-localize Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-localize/releases) +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## API @@ -221,20 +282,20 @@ Check the release version information in the release address of the third-party > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Required | Platform | HarmonyOS Support | -|---------------------------| ---------------------------------------------- | -------- |----------|-------------------| -| getLocales() | Returns the user preferred locales, in order. | No | All | yes | -| getNumberFormatSettings() | Returns number formatting settings. | No | All | yes | -| getCurrencies() | Returns the user preferred currency codes, in order. | No | All | yes | -| getCountry() | Returns the user current country code (based on its device locale, not on its position). | No | All | yes | -| getCalendar() | Returns the user preferred calendar format. | No | All | yes | -| getTemperatureUnit() | Returns the user preferred temperature unit. | No | All | No | -| getTimeZone() | Returns the user preferred timezone (based on its device settings, not on its position). | No | All | yes | -| uses24HourClock() | Returns true if the user prefers 24h clock format, false if they prefer 12h clock format. | No | All | yes | -| usesMetricSystem() | Returns true if the user prefers metric measure system, false if they prefer imperial. | No | All | No | -| usesAutoDateAndTime() | Tells if the automatic date & time setting is enabled on the phone. Android only | No | Android | No | -| usesAutoTimeZone() | Tells if the automatic time zone setting is enabled on the phone. Android only | No | Android | No | -| findBestLanguageTag() | Returns the best language tag possible and its reading direction | No | All | yes | +| Name | Description | Required | Platform | HarmonyOS Support | +| ---------------------------------------- | ------------------------------------------------------------ | -------- | -------- | ----------------- | +| getLocales() | Returns the user preferred locales, in order. | No | All | yes | +| getNumberFormatSettings() | Returns number formatting settings. | No | All | yes | +| getCurrencies() | Returns the user preferred currency codes, in order. | No | All | yes | +| getCountry() | Returns the user current country code (based on its device locale, not on its position). | No | All | yes | +| getCalendar() | Returns the user preferred calendar format. | No | All | yes | +| getTemperatureUnit() | Returns the user preferred temperature unit. | No | All | No | +| getTimeZone() | Returns the user preferred timezone (based on its device settings, not on its position). | No | All | yes | +| uses24HourClock() | Returns true if the user prefers 24h clock format, false if they prefer 12h clock format. | No | All | yes | +| usesMetricSystem() | Returns true if the user prefers metric measure system, false if they prefer imperial. | No | All | No | +| usesAutoDateAndTime() | Tells if the automatic date & time setting is enabled on the phone. Android only | No | Android | No | +| usesAutoTimeZone() | Tells if the automatic time zone setting is enabled on the phone. Android only | No | Android | No | +| findBestLanguageTag() | Returns the best language tag possible and its reading direction | No | All | yes | ## Known Issues - [ ] Temperature and length units cannot be obtained in HarmonyOS [issue#2](https://github.com/react-native-oh-library/react-native-localize/issues/2) diff --git a/en/react-native-safe-modules.md b/en/react-native-safe-modules.md index 413a1d7f49763f2f8e9f0af23ed323692d3f8a6a..37abe839bdbc24129c158eb77b26b5c0b98c79c7 100644 --- a/en/react-native-safe-modules.md +++ b/en/react-native-safe-modules.md @@ -15,33 +15,44 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-safe-modules) -## Installation and Usage - -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-safe-modules Releases](https://github.com/react-native-oh-library/react-native-safe-modules/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. +Please go to the Releases page of the third-party library to check the compatible version information: -Go to the project directory and execute the following instruction: +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 1.0.3 | @react-native-oh-tpl/react-native-safe-modules | [Github](https://github.com/react-native-oh-library/react-native-safe-modules) | [Github Releases](https://github.com/react-native-oh-library/react-native-safe-modules/releases) | 0.72 | +| 1.1.0 | @react-native-ohos/react-native-safe-modules | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-safe-modules) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-safe-modules/releases) | 0.77 | +## Installation and Usage +Go to the project directory and execute the following commands: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-safe-modules + +# 0.77 +npm install @react-native-ohos/react-native-safe-modules ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-safe-modules + +# 0.77 +yarn add @react-native-ohos/react-native-safe-modules ``` -The following code shows the basic use scenario of the repository: +The following code shows the basic use scenario of the library: -> [!WARNING] The name of the imported repository remains unchanged. +> [!WARNING] When using, the imported library name remains unchanged. ```js import React from "react"; @@ -74,13 +85,14 @@ const App = () => { export default App; ``` -## Constraints +## Constraints and Limitations ### 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. +The following versions have been verified: -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-safe-modules Releases](https://github.com/react-native-oh-library/react-native-safe-modules/releases) +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## API @@ -92,7 +104,7 @@ Check the release version information in the release address of the third-party | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | -------- | ----------- | ----------------- | -| options.moduleName | the name, or array of names, to look for the module at on the NativeModules namespace. | string/string[] | yes | iOS,Android | yes | +| options.moduleName | The name, or array of names, to look for the module at on the NativeModules namespace. | string/string[] | yes | iOS,Android | yes | | options.mock | The mock implementation of the native module. | object | yes | iOS,Android | yes | | options.getVersion | A function that returns the version of the native module. Only needed if you are specifying overrides and not exporting a VERSION property on your native module. Defaults to x => x.VERSION. | Function | no | iOS,Android | yes | | options.versionOverrides | A map of version numbers to overridden implementations of the corresponding property/method. If an overridden property or method is a function, it will be called during SafeModule.create(...) with two arguments, the original value of that property on the original module, and the original module itself. The return value of this function will be put on the return value of SafeModule.create(...). | object | no | iOS,Android | yes | @@ -106,7 +118,7 @@ Check the release version information in the release address of the third-party | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | -------- | ----------- | ----------------- | -| options.moduleName | the name, or array of names, to look for the module at on the NativeModules namespace. | string/string[] | yes | iOS,Android | yes | +| options.moduleName | The name, or array of names, to look for the module at on the NativeModules namespace. | string/string[] | yes | iOS,Android | yes | | options.mock | The mock implementation of the native module. | object | yes | iOS,Android | yes | | options.getVersion | A function that returns the version of the native module. Only needed if you are specifying overrides and not exporting a VERSION property on your native module. Defaults to x => x.VERSION. | Function | no | iOS,Android | yes | | options.versionOverrides | A map of version numbers to overridden implementations of the corresponding property/method. If an overridden property or method is a function, it will be called during SafeModule.create(...) with two arguments, the original value of that property on the original module, and the original module itself. The return value of this function will be put on the return value of SafeModule.create(...). | object | no | iOS,Android | yes | @@ -118,20 +130,20 @@ Check the release version information in the release address of the third-party > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------- | ----------- | ----------------- | -| options.viewName | 传入的组件名称 | string/string[] | yes | iOS,Android | yes | -| options.mockComponent | 传入一个模拟的组件，当 viewName 查找不到的时候，component 会返回这个模拟的组件 | React.ComponentType\ | yes | iOS,Android | yes | -| options.componentOverrides | 根据版本获取其中定义的组件，如果和 viewName 相同，覆盖原生组件的 React 组件，需要确保返回的 React 组件是有效的 | object | no | no | no | -| options.propOverrides | 根据版本获取其中定义的组件 Properties，如果是相同组件的相同 Properties，根据版本覆盖原生组件的 Properties，需要确保覆盖的 Properties 在原生组件中存在 | object | no | no | no | -| options.mock | 原生模块的模拟实现，原生模块中存在什么成员，可使用该 Properties 自己模拟编写 | object | no | no | no | -| options.getVersion | 返回本机模块版本的函数。仅在指定替代且不导出本机模块上的版本 Properties 时才需要。默认值为 x => x.VERSION。 | Function | no | no | no | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | -------- | ----------- | ----------------- | +| options.viewName | The component name passed in. | string/string[] | yes | iOS,Android | yes | +| options.mockComponent | Pass in a mock component. When viewName cannot be found, the component will return this mock component. | React.ComponentType\ | yes | iOS,Android | yes | +| options.componentOverrides | Get the components defined according to the version. If the same as viewName, override the native component's React component. Need to ensure the returned React component is valid. | object | no | no | no | +| options.propOverrides | Get the component properties defined according to the version. If it is the same property of the same component, override the native component's properties according to the version. Need to ensure the overridden properties exist in the native component. | object | no | no | no | +| options.mock | The mock implementation of the native module. Whatever members exist in the native module, you can use this property to simulate and write them yourself. | object | no | no | no | +| options.getVersion | A function that returns the version of the native module. Only needed if you are specifying overrides and not exporting a VERSION property on your native module. Defaults to x => x.VERSION. | Function | no | no | no | ## Known Issues ## Others -- component 接口问题： 该接口在 iOS 和 Android 上均无法正常使用，不管输入的 viewName 是什么，都只会返回用户传递的 mockComponent，无法获得封装后的组件，HarmonyOS 与其表现一致:[issue#19](https://github.com/emilioicai/react-native-safe-modules/issues/19)。 +- Component interface issue: This interface cannot be used normally on both iOS and Android. No matter what viewName is input, it will only return the mockComponent passed by the user and cannot obtain the encapsulated component. HarmonyOS behaves consistently with it: [issue#19](https://github.com/emilioicai/react-native-safe-modules/issues/19). ## License diff --git a/en/react-native-theme-control.md b/en/react-native-theme-control.md index 7c4718f17320829232b9cb39b46e3b0d55c989ca..15a0a263f6b91e35282b7ec637cf68c3c73f209a 100644 --- a/en/react-native-theme-control.md +++ b/en/react-native-theme-control.md @@ -14,33 +14,46 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-theme-control) -## Installation and Usage - -Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-tpl/react-native-theme-control/Releases](https://github.com/react-native-oh-library/react-native-theme-control/releases). +Please check the matching version information at the Releases page of the third-party library: -Go to the project directory and execute the following instruction: +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 6.0.1 | @react-native-oh-tpl/react-native-theme-control | [Github](https://github.com/react-native-oh-library/react-native-theme-control) | [Github Releases](https://github.com/react-native-oh-library/react-native-theme-control/releases) | 0.72 | +| 6.1.1 | @react-native-ohos/react-native-theme-control | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-theme-control) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-theme-control/releases) | 0.77 | +## Installation and Usage +Navigate to the project directory and enter the following commands: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-theme-control + +# 0.77 +npm install @react-native-ohos/react-native-theme-control ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-theme-control + +# 0.77 +yarn add @react-native-ohos/react-native-theme-control ``` +> [!TIP] This library also depends on [react-native-community/segmented-control](/en/react-native-community-segmented-control.md) + -The following code shows the basic use scenario of the repository: +The following code shows the basic usage scenario of this library: -> [!WARNING] The name of the imported repository remains unchanged. +> [!WARNING] When using it, the imported library name remains unchanged. ```js import * as React from 'react'; @@ -66,46 +79,48 @@ export function SimpleScreen() { const values: Array = ['light', 'dark', 'system']; return ( - - { - setThemePreference(nativeEvent.value as ThemePreference); -}} -/> - useColorScheme(): {colorScheme} - -useThemePreference(): {themePreference} - - -); + style={{ + backgroundColor: bgColor, + flexGrow: 1, + flexShrink: 1, + alignItems: 'center', + justifyContent: 'space-evenly', + }} + > + + { + setThemePreference(nativeEvent.value as ThemePreference); + }} + /> + useColorScheme(): {colorScheme} + + useThemePreference(): {themePreference} + + + ); } ``` ## 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] V0.77 does not require Codegen execution. + +This library has been adapted to `Codegen`. Before using it, you need to actively generate the third-party library bridge code. For details, please refer to [Codegen Usage Document](/en/codegen.md). ## Link -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +Currently, HarmonyOS does not support AutoLink, so the Link step needs to be manually configured. -Open the `harmony` directory of the HarmonyOS project in DevEco Studio. +First, you need to open the HarmonyOS project `harmony` in the project with DevEco Studio. -### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project +### 1. Add overrides field in `oh-package.json5` in the project root directory ```json { @@ -116,21 +131,34 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. } ``` -### 2. Introducing Native Code +### 2. Import native code + +There are currently two methods: -Currently, two methods are available: +1. Import through har package (this method will be deprecated after the IDE improves related functions, currently the preferred method); +2. Directly link the source code. -Method 1 (recommended): Use the HAR file. +Method 1: Import through har package (recommended) -> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. +> [!TIP] The har package is located in the `harmony` folder of the third-party library installation path. -Open `entry/oh-package.json5` file and add the following dependencies: +Open `entry/oh-package.json5` and add the following dependencies: + +- 0.72 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/react-native-theme-control": "file:../../node_modules/@react-native-oh-tpl/react-native-theme-control/harmony/themecontrol.har", + "@react-native-oh-tpl/react-native-theme-control": "file:../../node_modules/@react-native-oh-tpl/react-native-theme-control/harmony/themecontrol.har" + } +``` +- 0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-theme-control": "file:../../node_modules/@react-native-ohos/react-native-theme-control/harmony/themecontrol.har" } ``` @@ -147,14 +175,71 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Introducing RNThemeControlPackage to ArkTS +### 3. Configure CMakeLists and import RNThemeControlPackage + +> [!TIP] V0.77 needs to configure CMakeLists and import RNThemeControlPackage. + +Open `entry/src/main/cpp/CMakeLists.txt` and add: -Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") ++ set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_END: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULE_DIR}/@react-native-ohos/react-native-theme-control/src/main/cpp" ./themecontrol) +# RNOH_END: manual_package_linking_1 + +add_library(rnoh_app SHARED + "./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_theme_control) +# RNOH_BEGIN: manual_package_linking_2 +``` + +> [!Tip] Note: The NODE_MODULES definition above is the installation path of the source library. Users can define NODE_MODULES according to the path where the source library is installed. + +Open `entry/src/main/cpp/PackageProvider.cpp` and add: + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "RNThemeControlPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4. Import RNThemeControlPackage on the ArkTs side + +Open `entry/src/main/ets/RNPackagesFactory.ts` and add: ```diff ... +// 0.72 + import { RNThemeControlPackage } from '@react-native-oh-tpl/react-native-theme-control/ts' +// 0.77 ++ import { RNThemeControlPackage } from '@react-native-ohos/react-native-theme-control/ts' + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -163,7 +248,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Add the `MyAbilityStage.ets` in `entry/src/main/ets/abilityStage` +### 5. Add the `MyAbilityStage.ets` in `entry/src/main/ets/abilityStage` Open the `entry/src/main/ets/abilityStage/MyAbilityStage.ets` file and add the following code: @@ -190,15 +275,19 @@ export default class MyAbilityStage extends AbilityStage { } ``` -### 5. Open the `entry/src/main/ets/entryability/EntryAbility.ets` file and add the following code: +### 6. Open the `entry/src/main/ets/entryability/EntryAbility.ets` file and add the following code: -Open the `entry/src/main/ets/abilityStage/MyAbilityStage.ets` file and add the following code: +Open `entry/src/main/ets/entryability/EntryAbility.ets` and add: ```diff -+ import {RNAbility} from 'rnoh'; ++ import {RNAbility} from '@rnoh/react-native-openharmony'; + import Want from '@ohos.app.ability.Want'; +// 0.72 + import { RNThemeControlModule } from '@react-native-oh-tpl/react-native-theme-control'; - ..... + +// 0.77 ++ import { RNThemeControlModule } from '@react-native-ohos/react-native-theme-control'; + + export default class EntryAbility extends RNAbility { + onCreate(want: Want): void { + super.onCreate(want); @@ -228,7 +317,7 @@ Open the `entry/src/main/module.json5` file and add the following code： ..... ``` -### 6. Running +### 7. Running Click the `sync` button in the upper right corner. @@ -245,9 +334,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. +Verified on the following versions: -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-theme-control Releases](https://github.com/react-native-oh-library/react-native-theme-control/releases) +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## API @@ -272,4 +362,4 @@ Check the release version information in the release address of the third-party ## License -This project is licensed under [The MIT License (MIT)](https://github.com/vonovak/react-native-theme-control/blob/main/LICENSE). +This project is licensed under [The MIT License (MIT)](https://github.com/vonovak/react-native-theme-control/blob/main/LICENSE). \ No newline at end of file diff --git a/en/react-native-user-agent.md b/en/react-native-user-agent.md index 4a81618009a853bc363d55dad72afd863e74ed6d..1d946d0f11e0ab05664cbb8fdfbc8b41b59a63e8 100644 --- a/en/react-native-user-agent.md +++ b/en/react-native-user-agent.md @@ -16,26 +16,37 @@ > [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-user-agent) -## Installation and Usage - -Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-tpl/react-native-user-agent Releases](https://github.com/react-native-oh-library/react-native-user-agent/releases). +Please go to the Releases page of the third-party library to check the compatible version information: -Go to the project directory and execute the following instruction: +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 2.3.1 | @react-native-oh-tpl/react-native-user-agent | [Github](https://github.com/react-native-oh-library/react-native-user-agent) | [Github Releases](https://github.com/react-native-oh-library/react-native-user-agent/releases) | 0.72 | +| 2.4.0 | @react-native-ohos/react-native-user-agent | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-user-agent) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-user-agent/releases) | 0.77 | +## Installation and Usage +Go to the project directory and enter the following command: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-user-agent + +# 0.77 +npm install @react-native-ohos/react-native-user-agent ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-user-agent + +# 0.77 +yarn add @react-native-ohos/react-native-user-agent ``` @@ -87,7 +98,9 @@ export default function UserAgentExample() { ## 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). +This library has been adapted to `Codegen`. Before using it, you need to actively execute the generation of bridge code for third-party libraries. For details, please refer to [Codegen Usage Document](/en/codegen.md). + +**Note:** 0.77 does not require Codegen execution. ## Link @@ -115,9 +128,11 @@ 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. +> [!TIP] The HAR package is located in the `harmony` folder under the third-party library installation path. -Open entry/oh-package.json5 file and add the following dependencies: +Open `entry/oh-package.json5` file and add the following dependencies: + +- 0.72 ```json "dependencies": { @@ -126,7 +141,16 @@ Open entry/oh-package.json5 file and add the following dependencies: } ``` -Click the sync button in the upper right corner. +- 0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-user-agent": "file:../../node_modules/@react-native-ohos/react-native-user-agent/harmony/user_agent.har" + } +``` + +Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -139,15 +163,76 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3.Introducing RNUserAgentPackage Package to ArkTS +### 3.Configuring CMakeLists and introducing UserAgent -Open the entry/src/main/ets/RNPackagesFactory.ts file and add the following code: +> Note: 0.77 does not require configuring CMakeLists. + +```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_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@rnoh/react-native-openharmony/src/main/cpp") ++ set(USER_AGENT_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@react-native-ohos/react-native-user-agent/src/main/cpp") +set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated") +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(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") + +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +# (VM) Define a variable and assign it to the current module's cpp directory +set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR}) + +# Add the Header File directory, including cpp, cpp/include, and tell cmake to find the Header Files introduced by the code here +include_directories(${NATIVERENDER_ROOT_PATH} + ${NATIVERENDER_ROOT_PATH}/include) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) ++ add_subdirectory("${USER_AGENT_CPP_DIR}" ./user_agent) + + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) ++ target_link_libraries(rnoh_app PUBLIC user_agent) +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add: + +```diff +#include "RNOH/PackageProvider.h" ++#include "generated/UserAgentPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) +{ + return { ++ std::make_shared(ctx), + }; +} +``` + +### 4.Introducing RNUserAgentPackage to ArkTs + +Open `entry/src/main/ets/RNPackagesFactory.ts` and add: ```diff ... - +// 0.72 + import { RNUserAgentPackage } from '@react-native-oh-tpl/react-native-user-agent/ts'; +// 0.77 ++ import { RNUserAgentPackage } from '@react-native-ohos/react-native-user-agent/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ + new RNUserAgentPackage(ctx) @@ -155,7 +240,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.Running +### 5.Running Click the sync button in the upper right corner. @@ -172,11 +257,12 @@ 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. +Verified on the following versions: -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-user-agent Releases](https://github.com/react-native-oh-library/react-native-user-agent/releases) +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; -## Properties +## API > [!tip] The Platform column indicates the platform where the properties are supported in the original third-party library. diff --git a/en/react-native-walkthrough-tooltip.md b/en/react-native-walkthrough-tooltip.md index 04e9a89a364168f548a8f6a81bff10229fa46f9e..01deb311c2d08d850401956ccf9ce6ec5f3095ec 100644 --- a/en/react-native-walkthrough-tooltip.md +++ b/en/react-native-walkthrough-tooltip.md @@ -15,9 +15,15 @@ > [!TIP] [GitHub address](https://github.com/jasongaare/react-native-walkthrough-tooltip) +Please go to the Releases page of the third-party library to check the compatible version information: + +| Library Version | Supported RN Version | +|-----------------|----------------------| +| 1.6.0 | 0.72/0.77 | + ## Installation and Usage -Go to the project directory and execute the following instruction: +Go to the project directory and enter the following command: #### **npm** @@ -64,7 +70,7 @@ This document is verified based on the following versions: 1. RNOH: 0.72.5; SDK: HarmonyOS-NEXT-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; -### Properties +### API [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library.。 diff --git a/zh-cn/bam-tech-react-native-image-resizer.md b/zh-cn/bam-tech-react-native-image-resizer.md index ea0465131fb66d98ea6db6206e3c0d4e09a37075..da03f552b819e56d72d20da1471746393837ae16 100644 --- a/zh-cn/bam-tech-react-native-image-resizer.md +++ b/zh-cn/bam-tech-react-native-image-resizer.md @@ -15,9 +15,14 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-resizer) -## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 3.0.9 | @react-native-oh-tpl/react-native-image-resizer | [Github](https://github.com/react-native-oh-library/react-native-image-resizer) | [Github Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases) | 0.72 | +| 3.1.0 | @react-native-ohos/react-native-image-resizer | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-image-resizer) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-resizer/releases) | 0.77 | -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-resizer Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 进入到工程目录并输入以下命令： @@ -26,13 +31,21 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-image-resizer + +# 0.77 +npm install @react-native-ohos/react-native-image-resizer ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-image-resizer + +# 0.77 +yarn add @react-native-ohos/react-native-image-resizer ``` @@ -270,6 +283,8 @@ export default ImageResizerDemo; ## 使用 Codegen +> [!TIP] 0.77 不需要执行Codegen + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -302,6 +317,8 @@ export default ImageResizerDemo; 打开 `entry/oh-package.json5`，添加以下依赖 +0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -309,6 +326,15 @@ export default ImageResizerDemo; } ``` +0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-image-resizer": "file:../../node_modules/@react-native-ohos/react-native-image-resizer/harmony/image_resizer.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -328,7 +354,10 @@ ohpm install ```diff ... + //0.72 + import {ImageResizerPackage} from '@react-native-oh-tpl/react-native-image-resizer/ts'; + //0.77 ++ import {ImageResizerPackage} from '@react-native-ohos/react-native-image-resizer/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -338,7 +367,62 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4.配置 CMakeLists 和引入 ImageResizerPackage + +> 0.77 需要配置 CMakeLists 和引入 ImageResizerPackage。 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +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") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_END: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-image-resizer/src/main/cpp" ./image-resizer) + +# RNOH_END: manual_package_linking_1 + +add_library(rnoh_app SHARED + "./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_ImageResizer) +# RNOH_BEGIN: manual_package_linking_2 +``` + +> [!Tip] 注意：上面NODE_MODULES定义，为源库的安装路径，用户可以根据安装源库的路径定义NODE_MODULES + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "ImageResizerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 5.运行 点击右上角的 `sync` 按钮 @@ -351,16 +435,20 @@ ohpm install 然后编译、运行即可。 +[!TIP] 本库还依赖了[[@react-native-oh-tpl/react-native-image-picker](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-image-picker.md)，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 + +如未引入请参照[@react-native-oh-tpl/react-native-image-picker](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-image-picker.md) 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-image-picker.md#link)进行引入 + ## 约束与限制 ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +在以下版本验证通过： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-resizer Releases](https://github.com/react-native-oh-library/react-native-image-resizer/releases) +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; - -## API +## 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -368,22 +456,22 @@ ohpm install | Name | Description | Type | Required | Platform | HarmonyOS Support | |--------------------|---------------------|----------|----------|-------------|-------------------| -| createResizedImage | Resize local images | function | No | Android/iOS | Yes | +| createResizedImage | 调整本地图片大小 | function | No | Android/iOS | Yes | ### createResizedImage参数 | Name | Description | Type | Platform | HarmonyOS Support | |----------------------|---------------------|---------|-------------|-------------------| -| path | Path of image file, or a base64 encoded image string prefixed with 'data:image/imagetype' where imagetype is jpeg or png. | string | Android/iOS | Yes | -| width | Width to resize to (see mode for more details) | number | Android/iOS | Yes | -| height | Height to resize to (see mode for more details) | number | Android/iOS | Yes | -| compressFormat | Can be either JPEG, PNG or WEBP. | string | Android/iOS | Yes | -| quality | A number between 0 and 100. Used for the JPEG compression. | number | Android/iOS | Yes | -| rotation | Rotation to apply to the image, in degrees. | number | Android/iOS | Yes | -| outputPath | The resized image path. If null, resized image will be stored in cache folder. To set outputPath make sure to add option for rotation too (if no rotation is needed, just set it to 0). | string | Android/iOS | Yes | -| keepMeta | If true, will attempt to preserve all file metadata/exif info, except the orientation value since the resizing also does rotation correction to the original image. Defaults to false, which means all metadata is lost. Note: This can only be true for JPEG images which are loaded from the file system (not Web). | boolean | Android/iOS | Yes | -| options.mode | Similar to react-native Image's resizeMode: either contain (the default), cover, or stretch. contain will fit the image within width and height, preserving its ratio. cover preserves the aspect ratio, and makes sure the image is at least width wide or height tall. stretch will resize the image to exactly width and height. | string | Android/iOS | Yes | -| options.onlyScaleDown | If true, will never enlarge the image, and will only make it smaller. | boolean | Android/iOS | Yes | +| imageUri | 图片文件路径，或以'data:image/imagetype'为前缀的base64编码图片字符串，其中imagetype为jpeg或png。 | string | Android/iOS | Yes | +| width | 调整后的宽度（详见mode参数说明）。 | number | Android/iOS | Yes | +| height | 调整后的高度（详见mode参数说明）。 | number | Android/iOS | Yes | +| compressFormat | 压缩格式，可以是JPEG、PNG或WEBP。 | string | Android/iOS | Yes | +| quality | 0到100之间的数字，用于JPEG压缩质量。 | number | Android/iOS | Yes | +| rotation | 应用于图片的旋转角度，单位为度。 | number | Android/iOS | Yes | +| outputPath | 调整后图片的存储路径。如果为null，调整后的图片将存储在缓存文件夹中。设置outputPath时请确保也设置了rotation参数（如果不需要旋转，只需将其设置为0）。 | string | Android/iOS | Yes | +| keepMeta | 如果为true，将尝试保留所有文件元数据/exif信息，除了方向值，因为调整大小也会对原始图像进行旋正处理。默认为false，表示所有元数据都会丢失。注意：这只适用于从文件系统（非Web）加载的JPEG图像。 | boolean | Android/iOS | Yes | +| options.mode | 类似于React Native Image的resizeMode：contain（默认）、cover或stretch。contain会在保持宽高比的情况下将图像适应到指定的宽高内。cover会保持宽高比，并确保图像至少与指定宽度一样宽或与指定高度一样高。stretch会将图像精确调整为指定的宽高。 | string | Android/iOS | Yes | +| options.onlyScaleDown | 如果为true，永远不会放大图像，只会缩小图像。 | boolean | Android/iOS | Yes | ## 遗留问题 @@ -391,4 +479,5 @@ ohpm install ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/bamlab/react-native-image-resizer/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [The MIT License (MIT)](https://github.com/bamlab/react-native-image-resizer/blob/master/LICENSE) ，请自由地享受和参与开源。 + diff --git a/zh-cn/react-native-clipboard-clipboard.md b/zh-cn/react-native-clipboard-clipboard.md index 4167d2a89648ccd395269561e549108142f4d1c2..d418c8fb010331507bf6395d267cd363247a591c 100644 --- a/zh-cn/react-native-clipboard-clipboard.md +++ b/zh-cn/react-native-clipboard-clipboard.md @@ -14,9 +14,14 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/clipboard/tree/sig) +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 1.13.2 | @react-native-oh-tpl/clipboard | [Github](https://github.com/react-native-oh-library/clipboard) | [Github Releases](https://github.com/react-native-oh-library/clipboard/releases) | 0.72 | +| 1.16.3 | @react-native-ohos/clipboard | [GitCode](https://gitcode.com/openharmony-sig/rntpc_clipboard) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_clipboard/releases) | 0.77 | + ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/clipboard Releases](https://github.com/react-native-oh-library/clipboard/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： 进入到工程目录并输入以下命令： @@ -25,13 +30,21 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/clipboard + +# 0.77 +npm install @react-native-ohos/clipboard ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/clipboard + +# 0.77 +yarn add @react-native-ohos/clipboard ``` @@ -40,6 +53,8 @@ yarn add @react-native-oh-tpl/clipboard > [!WARNING] 使用时 import 的库名不变。 +#### **For RN0.72** + ```js import Clipboard from "@react-native-clipboard/clipboard"; @@ -72,6 +87,55 @@ const App = () => { export default App; ``` +**For RN0.77** + +```js +import React, { useState } from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import Clipboard from "@react-native-clipboard/clipboard"; + +const App = () => { + const [copiedText, setCopiedText] = useState(""); + + const copyToClipboard = () => { + Clipboard.setString("hello world"); + }; + + const fetchCopiedText = async () => { + const text = await Clipboard.getString(); + setCopiedText(text); + }; + + return ( + + + Click here to copy to Clipboard + + + View copied text + + + {copiedText} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + padding: 20, + }, + copiedText: { + marginTop: 20, + fontSize: 18, + }, +}); + +export default App; +``` + ## Link 目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 @@ -102,6 +166,8 @@ export default App; 打开 `entry/oh-package.json5`，添加以下依赖 +- 0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -110,6 +176,16 @@ export default App; } ``` +- 0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-ohos/clipboard": "file:../../node_modules/@react-native-ohos/clipboard/harmony/clipboard.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -145,7 +221,13 @@ 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/clipboard/src/main/cpp" ./clipboard) + +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/clipboard/src/main/cpp" ./clipboard) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -189,8 +271,13 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff import type {RNPackageContext, RNPackage} from 'rnoh/ts'; import {SamplePackage} from 'rnoh-sample-package/ts'; + +// 0.72 + import {ClipboardPackage} from '@react-native-oh-tpl/clipboard/ts'; +// 0.77 ++ import {ClipboardPackage} from '@react-native-ohos/clipboard/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -217,9 +304,10 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +在以下版本验证通过： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/clipboard Releases](https://github.com/react-native-oh-library/clipboard/releases) +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ### 权限要求 @@ -267,21 +355,21 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | -| getString | Get content of string type, this method returns a Promise, so you can use following code to get clipboard content | function | NO | iOS,Android | yes | -| setString | Set content of string type. You can use following code to set clipboard content | function | NO | iOS,Android | yes | -| hasString | Returns whether the clipboard has content or is empty. | function | NO | iOS,Android | yes | -| getImage | Get content of image in base64 string type, this method returns a Promise, so you can use following code to get clipboard content (ANDROID only) | function | NO | Android | no | -| getStrings | (iOS only) Get contents of string array type, this method returns a Promise, so you can use following code to get clipboard content | function | NO | iOS | yes | -| setStrings | (iOS only) Set content of string array type. You can use following code to set clipboard content | function | NO | iOS | yes | -| hasNumber | (iOS 14+ only) Returns whether the clipboard has a Number(UIPasteboardDetectionPatternNumber) content. Can check if there is a Number content in clipboard without triggering PasteBoard notification for iOS 14+ | function | NO | iOS | yes | -| hasImage | Returns whether the clipboard has a Image | function | NO | iOS | yes | -| hasUrl | (iOS only) Returns whether the clipboard has a URL content. Can check if there is a URL content in clipboard without triggering PasteBoard notification for iOS 14+ | function | NO | iOS | yes | -| hasWebUrl | (iOS 14+ only) Returns whether the clipboard has a WebURL(UIPasteboardDetectionPatternProbableWebURL) content. Can check if there is a WebURL content in clipboard without triggering PasteBoard notification for iOS 14+ | function | NO | iOS | yes | -| setImage | Set content of Image type.（base64 string） | function | NO | iOS | yes | -| getImageJPG | get base64 string of JPG Image | function | NO | iOS | yes | -| getImagePNG | get base64 string of PNG Image | function | NO | iOS | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------- | ------------------------- | -------- | -------- | ----------- | ----------------- | +| getString | 获取字符串类型的内容，该方法返回一个Promise，因此可以使用以下代码获取剪贴板内容 | function | NO | iOS,Android | yes | +| setString | 设置字符串类型的内容，可以使用以下代码设置剪贴板内容 | function | NO | iOS,Android | yes | +| hasString | 返回剪贴板是否有内容或为空 | function | NO | iOS,Android | yes | +| getImage | 获取base64字符串类型的图像内容，该方法返回一个Promise，因此可以使用以下代码获取剪贴板内容（仅限ANDROID） | function | NO | Android | no | +| getStrings | （仅限iOS）获取字符串数组类型的内容，该方法返回一个Promise，因此可以使用以下代码获取剪贴板内容 | function | NO | iOS | yes | +| setStrings | （仅限iOS）设置字符串数组类型的内容，可以使用以下代码设置剪贴板内容 | function | NO | iOS | yes | +| hasNumber | （仅限iOS 14+）返回剪贴板是否包含数字(UIPasteboardDetectionPatternNumber)内容。可以在不触发iOS 14+的粘贴板通知的情况下检查剪贴板中是否有数字内容 | function | NO | iOS | yes | +| hasImage | 返回剪贴板是否有图像 | function | NO | iOS | yes | +| hasUrl | （仅限iOS）返回剪贴板是否包含URL内容。可以在不触发iOS 14+的粘贴板通知的情况下检查剪贴板中是否有URL内容 | function | NO | iOS | yes | +| hasWebUrl | （仅限iOS 14+）返回剪贴板是否包含WebURL(UIPasteboardDetectionPatternProbableWebURL)内容。可以在不触发iOS 14+的粘贴板通知的情况下检查剪贴板中是否有WebURL内容 | function | NO | iOS | yes | +| setImage | 设置图像类型的内容（base64字符串） | function | NO | iOS | yes | +| getImageJPG | 获取JPG图像的base64字符串 | function | NO | iOS | yes | +| getImagePNG | 获取PNG图像的base64字符串 | function | NO | iOS | yes | ## 遗留问题 diff --git a/zh-cn/react-native-community-geolocation.md b/zh-cn/react-native-community-geolocation.md index 7774b0ae5d981948aa8acdcedb3ae460dd6dfead..2ecc25987c89da1d8a62ee308eb8ce4bec3833db 100644 --- a/zh-cn/react-native-community-geolocation.md +++ b/zh-cn/react-native-community-geolocation.md @@ -14,9 +14,14 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-geolocation/tree/sig) -## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 3.1.0 | @react-native-oh-tpl/geolocation | [Github](https://github.com/react-native-oh-library/react-native-geolocation) | [Github Releases](https://github.com/react-native-oh-library/react-native-geolocation/releases) | 0.72 | +| 3.4.1 | @react-native-ohos/react-native-geolocation | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-geolocation) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-geolocation/releases) | 0.77 | -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/geolocation Releases](https://github.com/react-native-oh-library/react-native-geolocation/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 进入到工程目录并输入以下命令： @@ -25,13 +30,21 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/geolocation + +# 0.77 +npm install @react-native-ohos/geolocation ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/geolocation + +# 0.77 +yarn add @react-native-ohos/geolocation ``` @@ -90,6 +103,8 @@ export function GeolocationDemo(): JSX.Element { 打开 `entry/oh-package.json5`，添加以下依赖 +- 0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -97,6 +112,15 @@ export function GeolocationDemo(): JSX.Element { } ``` +- 0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/geolocation": "file:../../node_modules/@react-native-ohos/geolocation/harmony/geolocation.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -132,7 +156,13 @@ 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/geolocation/src/main/cpp" ./geolocation) + +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/geolocation/src/main/cpp" ./geolocation) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -174,8 +204,12 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... +// 0.72 + import {GeoLocationPackage} from '@react-native-oh-tpl/geolocation/ts'; +// 0.77 ++ import {GeoLocationPackage} from '@react-native-ohos/geolocation/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -201,9 +235,10 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +在以下版本验证通过： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/geolocation Releases](https://github.com/react-native-oh-library/react-native-geolocation/releases) +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); 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; ### 权限要求 @@ -264,13 +299,13 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | Notes | -| -------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------- | -------- | ----------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| setRNConfiguration | Sets configuration options that will be used in all location requests | function(config) | NO | iOS Android | partially | config only supports skipPermissionRequests | -| requestAuthorization | Request suitable Location permission | function(success,error) | YES | iOS Android | partially | error: Only code and message are supported. | -| getCurrentPosition | Invokes the success callback once with the latest location info | function(success(position),error(error),option) | NO | iOS Android | partially | In position, only altitudeAccuracy is not supported. In option, only timeout and maximumAge are supported. In error, only code and message are supported. | -| watchPosition | Invokes the success callback whenever the location changes. Returns a watchId (number) | function(success(postion),error(error),option) | NO | iOS Android | partially | In position, only altitudeAccuracy is not supported. In error, only code and message are supported. In option, only interval and distanceFilter are supported. | -| clearWatch | Clears watch observer by id returned by watchPosition() | function(watchID) | NO | iOS Android | yes | watchID supports only the default value 0. | +| Name | Description | Type | Required | Platform | HarmonyOS Support | Notes | +| -------------------- | ------------------------------------------------------------------ | ----------------------------------------------- | -------- | ----------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| setRNConfiguration | 设置将在所有位置请求中使用的配置选项 | function(config) | NO | iOS Android | partially | config only supports skipPermissionRequests | +| requestAuthorization | 请求合适的位置权限 | function(success,error) | YES | iOS Android | partially | error: Only code and message are supported. | +| getCurrentPosition | 使用最新位置信息调用成功回调一次 | function(success(position),error(error),option) | NO | iOS Android | partially | In position, only altitudeAccuracy is not supported. In option, only timeout and maximumAge are supported. In error, only code and message are supported. | +| watchPosition | 每当位置发生变化时调用成功回调。返回一个 watchId (数字) | function(success(postion),error(error),option) | NO | iOS Android | partially | In position, only altitudeAccuracy is not supported. In error, only code and message are supported. In option, only interval and distanceFilter are supported. | +| clearWatch | 通过 watchPosition() 返回的 ID 清除观察者 | function(watchID) | NO | iOS Android | yes | watchID supports only the default value 0. | ## 遗留问题 diff --git a/zh-cn/react-native-confirmation-code-field.md b/zh-cn/react-native-confirmation-code-field.md index 58c1b116a578610120cf6d8120eeae157f00e498..a858e68869f72bf9a2f85e74b80687f45f1c76d9 100644 --- a/zh-cn/react-native-confirmation-code-field.md +++ b/zh-cn/react-native-confirmation-code-field.md @@ -14,18 +14,35 @@ > [!TIP] [Github 地址](https://github.com/retyui/react-native-confirmation-code-field) +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 7.3.2 | 0.72 | +| 8.0.0 | 0.77 | + ## 安装与使用 +进入到工程目录并输入以下命令： + #### **npm** ```bash +# 0.72 npm install react-native-confirmation-code-field@7.3.2 + +# 0.77 +npm install react-native-confirmation-code-field@8.0.0 ``` #### **yarn** ```bash +# 0.72 yarn add react-native-confirmation-code-field@7.3.2 + +# 0.77 +yarn add react-native-confirmation-code-field@8.0.0 ``` @@ -112,7 +129,7 @@ export default App; 1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：205.0.0.18; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; -## 组件 +## 属性 > [!TIP] "Platform"列表示该组件在原三方库上支持的平台。 @@ -120,8 +137,8 @@ export default App; | Name | Description | Type | Platform | HarmonyOS Support | | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------- | ----------------- | -| `CodeField` | This a base component that render RootComponent (default: View) with cells that would be returned by renderCell() and a that will be invisible and over all cells within root component | component | All | yes | -| `Cursor` | It's a help component for simulation a cursor blinking animation in components | component | All | yes | +| `CodeField` | 这是一个基础组件，用于渲染根组件（默认为View），其中包含由renderCell()返回的单元格以及一个不可见且覆盖所有单元格的 | component | All | yes | +| `Cursor` | 这是一个辅助组件，用于在组件中模拟光标闪烁动画 | component | All | yes | ## CodeField属性 @@ -131,13 +148,13 @@ export default App; | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | -------- | ----------------- | -| `cellCount` | Number of characters in input (optional, default: 4) | number | yes | All | yes | -| `renderCell?` | Required function for Cell rendering, will be invoke with next options:{index: number, symbol: string, isFocused: boolean} | ReactElement | No | All | yes | -| `RootComponent?` | if you want change root component for example using animations RootComponent={Animated.View} (optional, default View) | ComponentType | No | All | yes | -| `InputComponent?` | If you want to provide a custom TextInput component that can receive the same props (optional, default TextInput) | ComponentType | No | All | yes | -| `rootStyle?` | Styles for root component (optional) | StyleProp | No | All | yes | -| `RootProps?` | Any props that will applied for root component | Object | No | All | yes | -| `textInputStyle?` | Styles for invisible , can be used for testing or debug (optional) | StyleProp | No | All | yes | +| `cellCount` | 输入框中的字符数量（可选，默认值：4） | number | yes | All | yes | +| `renderCell?` | 渲染单元格所需的必要函数，将使用以下选项调用：{index: number, symbol: string, isFocused: boolean} | ReactElement | No | All | yes | +| `RootComponent?` | 如果您想要更改根组件，例如使用动画 RootComponent={Animated.View}（可选，默认为View） | ComponentType | No | All | yes | +| `InputComponent?` | 如果您想要提供一个可以接收相同属性的自定义TextInput组件（可选，默认为TextInput） | ComponentType | No | All | yes | +| `rootStyle?` | 根组件的样式（可选） | StyleProp | No | All | yes | +| `RootProps?` | 将应用于根组件的任何属性 | Object | No | All | yes | +| `textInputStyle?` | 不可见的样式，可用于测试或调试（可选） | StyleProp | No | All | yes | ## Hooks @@ -147,8 +164,8 @@ export default App; | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -------- | -------- | ----------------- | -| `useClearByFocusCell` | Simple hook that add functionality that trim value by pressed cell,After invoke this hook wil return array with two values `[props,getCellOnLayout]`;
-`props`- an object that you should spreed to ` `
- `getCellOnLayout(index: number): Function` - helper method that returns `onLayout` handler
- If you need to style only one borderX (example `borderBottom`) you need to know about React Native issue with [border styles for `` on iOS](https://github.com/facebook/react-native/issues/23537).
- To fix it need `` wrapper for Cell, but don't forger to move `onLayout={getCellOnLayoutHandler(index)` to `` | Function | yes | All | yes | -| `useBlurOnFulfill` | This hook include a logic to blurring``when value fulfilled You should pass two params:
- `value?: string` - a string value that;
- `cellCount: number`;
Returned value will be a TextInput ref that you should pass to``component.And when a value length would equal cellCount will be called `.blur()` method.It work perfectly with `useClearByFocusCell` hook | Ref | yes | All | yes | +| `useClearByFocusCell` | 简单的钩子，添加通过点击单元格修剪值的功能。调用此钩子后将返回包含两个值的数组`[props,getCellOnLayout]`；
-`props`- 应该展开到``的对象
- `getCellOnLayout(index: number): Function` - 返回`onLayout`处理程序的辅助方法
- 如果您只需要设置一个边框（例如`borderBottom`），您需要了解React Native中关于[iOS上``边框样式的issue](https://github.com/facebook/react-native/issues/23537)。
- 要解决这个问题，需要为单元格添加``包装器，但别忘了将`onLayout={getCellOnLayoutHandler(index)`移动到``上 | Function | yes | All | yes | +| `useBlurOnFulfill` | 此钩子包含在值填满时使``失去焦点的逻辑。您应该传递两个参数：
- `value?: string` - 字符串值；
- `cellCount: number`；
返回值将是应该传递给``组件的TextInput引用。当值的长度等于cellCount时，将调用`.blur()`方法。它与`useClearByFocusCell`钩子完美配合工作 | Ref | yes | All | yes | ## 其他 diff --git a/zh-cn/react-native-file-access.md b/zh-cn/react-native-file-access.md index fdebb796d2b418f0b7a1822ccc6eb784157071ac..07ea1a8b8c443dadcc2b6f9c6b58a50e7f560538 100644 --- a/zh-cn/react-native-file-access.md +++ b/zh-cn/react-native-file-access.md @@ -14,16 +14,15 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-file-access) -## 安装与使用 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 3.1.0 | [@react-native-oh-tpl/react-native-file-access Releases](https://github.com/react-native-oh-library/react-native-file-access/releases) | 0.72 | -| 3.1.2 | [@react-native-ohos/react-native-file-access Releases]() | 0.77 | +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 3.1.0 | @react-native-oh-tpl/react-native-file-access | [Github](https://github.com/react-native-oh-library/react-native-file-access) | [Github Releases](https://github.com/react-native-oh-library/react-native-file-access/releases) | 0.72 | +| 3.2.0 | @react-native-ohos/react-native-file-access | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-file-access) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-file-access/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 进入到工程目录并输入以下命令： @@ -32,20 +31,20 @@ #### **npm** ```bash -# V3.1.0 +# 0.72 npm install @react-native-oh-tpl/react-native-file-access -# V3.1.2 +# 0.77 npm install @react-native-ohos/react-native-file-access ``` #### **yarn** ```bash -# V3.1.0 +# 0.72 yarn add @react-native-oh-tpl/react-native-file-access -# V3.1.2 +# 0.77 yarn add @react-native-ohos/react-native-file-access ``` @@ -264,8 +263,8 @@ function FileAccessDemo() { FileAccess.df() - 可用空间：{freeSize ? (freeSize / (1024 * 1024 * 1024)).toFixed(2) : ''}GB - 总空间：{totalSize ? (totalSize / (1024 * 1024 * 1024)).toFixed(2) : ''}GB + 可用空间：{freeSize ? (freeSize / (1000 * 1000 * 1000)).toFixed(2) : ''}GB + 总空间：{totalSize ? (totalSize / (1000 * 1000 * 1000)).toFixed(2) : ''}GB @@ -331,7 +330,7 @@ export default FileAccessDemo ## 使用 Codegen -> [!] V3.1.2 不需要执行 Codegen。 +> [!] 0.77 不需要执行 Codegen。 本库已经适配了 Codegen ，在使用前需要主动执行生成三方库桥接代码，详细请参考 [Codegen 文档](/zh-cn/codegen.md)。 @@ -365,7 +364,7 @@ export default FileAccessDemo 打开 `entry/oh-package.json5`，添加以下依赖 -- V3.1.0 +- 0.72 ```json "dependencies": { @@ -374,7 +373,7 @@ export default FileAccessDemo } ``` -- V3.1.2 +- 0.77 ```json "dependencies": { @@ -468,10 +467,10 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... -# V3.1.0 +# 0.72 + import { RNFileAccessPackage } from '@react-native-oh-tpl/react-native-file-access/ts'; -# V3.1.2 +# 0.77 + import { RNFileAccessPackage } from '@react-native-ohos/react-native-file-access/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -499,46 +498,43 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +在以下版本验证通过： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 3.1.0 | [@react-native-oh-tpl/react-native-file-access Releases](https://github.com/react-native-oh-library/react-native-file-access/releases) | 0.72 | -| 3.1.2 | [@react-native-ohos/react-native-file-access Releases]() | 0.77 | +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); 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 +## 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -#### File System Access API +#### File System Access 属性 | Name | Description | Type | Platform | Required | HarmonyOS Support | | -------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | -| appendFile | Append content to a file. | Function | No | iOS/Android | Yes | -| concatFiles | Append a file to another file. Returns number of bytes written. | Function | No | iOS/Android | Yes | -| cp | Copy a file. | Function | No | iOS/Android | Yes | -| cpAsset | Copy a bundled asset file. | Function | No | iOS/Android | Yes | -| cpExternal | Copy a file to an externally controlled location. | Function | No | iOS/Android | Yes | -| df | Check device available space. | Function | No | iOS/Android | Yes | -| exists | Check if a path exists. | Function | No | iOS/Android | Yes | -| fetch | Save a network request to a file. | Function | No | iOS/Android | Yes | -| getAppGroupDir | Get the directory for your app group (iOS & MacOS only). | Function | No | iOS | No | -| hash | Hash the file content. | Function | No | iOS/Android | Yes | -| isDir | Check if a path is a directory. | Function | No | iOS/Android | Yes | -| ls | List files in a directory. | Function | No | iOS/Android | Yes | -| mkdir | Make a new directory. | Function | No | iOS/Android | Yes | -| mv | Move a file. | Function | No | iOS/Android | Yes | -| readFile | Read the content of a file. | Function | No | iOS/Android | Yes | -| readFileChunk | Read a chunk of the content of a file, starting from byte at offset, reading for length bytes. | Function | No | iOS/Android | Yes | -| stat | Read file metadata. | Function | No | iOS/Android | Yes | -| statDir | Read metadata of all files in a directory. | Function | No | iOS/Android | Yes | -| unlink | Delete a file. | Function | No | iOS/Android | Yes | -| unzip | Extract a zip archive. | Function | No | iOS/Android | Yes | -| writeFile | Write content to a file. | Function | No | iOS/Android | Yes | +| appendFile | 向文件追加内容 | Function | No | iOS/Android | Yes | +| concatFiles | 将一个文件追加到另一个文件，返回写入的字节数 | Function | No | iOS/Android | Yes | +| cp | 复制文件 | Function | No | iOS/Android | Yes | +| cpAsset | 复制捆绑的资源文件 | Function | No | iOS/Android | Yes | +| cpExternal | 将文件复制到外部控制的位置 | Function | No | iOS/Android | Yes | +| df | 检查设备可用空间 | Function | No | iOS/Android | Yes | +| exists | 检查路径是否存在 | Function | No | iOS/Android | Yes | +| fetch | 将网络请求保存到文件 | Function | No | iOS/Android | Yes | +| getAppGroupDir | 获取应用组目录（仅限 iOS 和 MacOS） | Function | No | iOS | No | +| hash | 对文件内容进行哈希计算 | Function | No | iOS/Android | Yes | +| isDir | 检查路径是否为目录 | Function | No | iOS/Android | Yes | +| ls | 列出目录中的文件 | Function | No | iOS/Android | Yes | +| mkdir | 创建新目录 | Function | No | iOS/Android | Yes | +| mv | 移动文件 | Function | No | iOS/Android | Yes | +| readFile | 读取文件内容 | Function | No | iOS/Android | Yes | +| readFileChunk | 读取文件的一部分内容，从偏移量字节开始，读取指定长度的字节 | Function | No | iOS/Android | Yes | +| stat | 读取文件元数据 | Function | No | iOS/Android | Yes | +| statDir | 读取目录中所有文件的元数据 | Function | No | iOS/Android | Yes | +| unlink | 删除文件 | Function | No | iOS/Android | Yes | +| unzip | 解压 ZIP 压缩包 | Function | No | iOS/Android | Yes | +| writeFile | 将内容写入文件 | Function | No | iOS/Android | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-image-header-scroll-view.md b/zh-cn/react-native-image-header-scroll-view.md index 98c8ed744726aeecacd39b5ae59e96f443c17da8..bd8ec3d1e8ac574d553be335578786feb7caee70 100644 --- a/zh-cn/react-native-image-header-scroll-view.md +++ b/zh-cn/react-native-image-header-scroll-view.md @@ -12,16 +12,16 @@

- - - - > [!TIP] [Github 地址](https://github.com/bamlab/react-native-image-header-scroll-view) -## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息： -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-header-scroll-view Releases](https://github.com/react-native-oh-library/react-native-image-header-scroll-view/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 0.10.3 | @react-native-oh-tpl/react-native-image-header-scroll-view | [Github](https://github.com/react-native-oh-library/react-native-image-header-scroll-view) | [Github Releases](https://github.com/react-native-oh-library/react-native-image-header-scroll-view/releases) | 0.72 | +| 1.1.0 | @react-native-ohos/react-native-image-header-scroll-view | [Github](https://github.com/bamlab/react-native-image-header-scroll-view) | [Github Releases](https://github.com/bamlab/react-native-image-header-scroll-view/releases) | 0.77 | +## 安装与使用 进入到工程目录并输入以下命令： @@ -30,13 +30,21 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-image-header-scroll-view + +# 0.77 +npm install @react-native-ohos/react-native-image-header-scroll-view ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-image-header-scroll-view + +# 0.77 +yarn add @react-native-ohos/react-native-image-header-scroll-view ``` @@ -229,11 +237,12 @@ export default HeaderImageExample; ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +在以下版本验证通过： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-header-scroll-view Releases](https://github.com/react-native-oh-library/react-native-image-header-scroll-view/releases) +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; -## API +## 属性 > [!Tip] "Platform"列表示该属性在原三方库上支持的平台。 @@ -243,37 +252,37 @@ export default HeaderImageExample; | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------------------- | ------------------------------------------------------------ | ------ | -------- | -------- | ----------------- | -| `renderHeader` | Function which return the component to use as header. It can return background image for example. | function | No | All | Yes | -| `headerImage` | Shortcut for renderHeader={() => 1.0.1+ | TriggeringView的样式 | ViewStyle | No | All | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-image-viewing.md b/zh-cn/react-native-image-viewing.md index 5f01fb167cc2e43babc41d515bf7c9c2c750bbac..40f1c38e7ef06188d550cc550968409ed03df351 100644 --- a/zh-cn/react-native-image-viewing.md +++ b/zh-cn/react-native-image-viewing.md @@ -15,15 +15,14 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-viewing) -## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.2.2 |[@react-native-oh-tpl/react-native-image-viewing Releases](https://github.com/react-native-oh-library/react-native-image-viewing/releases) | 0.72 | -| 0.2.3 |[@react-native-ohos/react-native-image-viewing Releases]() | 0.77 | +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 0.2.2 | @react-native-oh-tpl/react-native-image-viewing | [Github](https://github.com/react-native-oh-library/react-native-image-viewing) | [Github Releases](https://github.com/react-native-oh-library/react-native-image-viewing/releases) | 0.72 | +| 0.3.0 | @react-native-ohos/react-native-image-viewing | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-image-viewing) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-viewing/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 进入到工程目录并输入以下命令： @@ -36,20 +35,20 @@ #### npm ```bash -# V0.2.2 +# 0.72 npm install @react-native-oh-tpl/react-native-image-viewing -# V0.2.3 +# 0.77 npm install @react-native-ohos/react-native-image-viewing ``` #### yarn ```bash -# V0.2.2 +# 0.72 yarn add @react-native-oh-tpl/react-native-image-viewing -# V0.2.3 +# 0.77 yarn add @react-native-ohos/react-native-image-viewing ``` @@ -204,13 +203,10 @@ const styles = StyleSheet.create({ ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +在以下版本验证通过： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.2.2 |[@react-native-oh-tpl/react-native-image-viewing Releases](https://github.com/react-native-oh-library/react-native-image-viewing/releases) | 0.72 | -| 0.2.3 |[@react-native-ohos/react-native-image-viewing Releases]() | 0.77 | +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## 属性 @@ -220,21 +216,21 @@ const styles = StyleSheet.create({ | Name | Description | Type | Platform | Required | HarmonyOS Support | | ---------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | -------- | -------- | ----------------- | -| images | Array of images to display | ImageSource[] | All | Yes | Yes | -| keyExtractor | Uniqely identifying each image | (imageSrc: ImageSource, index: number) => string | All | No | Yes | -| imageIndex | Current index of image to display | number | All | Yes | Yes | -| visible | Is modal shown or not | boolean | All | No | Yes | -| onRequestClose | Function called to close the modal | function | All | Yes | Yes | -| onImageIndexChange | Function called when image index has been changed | function | All | No | Yes | -| onLongPress | Function called when image long pressed | function (event: GestureResponderEvent, image: ImageSource) | All | No | Yes | -| delayLongPress | Delay in ms, before onLongPress is called: default | number | All | No | Yes | -| animationType | Animation modal presented with: default | none, fade, slide | All | No | Yes | -| presentationStyle | Modal presentation style: default: fullScreen Android: Use overFullScreen to hide StatusBar | fullScreen, pageSheet, formSheet, overFullScreen | All | No | Partially (Support "fullScreen", "overFullScreen") | -| backgroundColor | Background color of the modal in HEX | string | All | No | Yes | -| swipeToCloseEnabled | Close modal with swipe up or down: default | boolean | All | No | Yes | -| doubleTapToZoomEnabled | Zoom image by double tap on it: default | boolean | All | No | Yes | -| HeaderComponent | Header component, gets current imageIndex as a prop | component, function | All | No | Yes | -| FooterComponent | Footer component, gets current imageIndex as a prop | component, function | All | No | Yes | +| images | 图片数组用于显示 | ImageSource[] | All | Yes | Yes | +| keyExtractor | 唯一标识每张图片 | (imageSrc: ImageSource, index: number) => string | All | No | Yes | +| imageIndex | 当前显示图片的索引 | number | All | Yes | Yes | +| visible | 控制模态框是否显示 | boolean | All | No | Yes | +| onRequestClose | 关闭模态框时调用的函数 | function | All | Yes | Yes | +| onImageIndexChange | 图片索引改变时调用的函数 | function | All | No | Yes | +| onLongPress | 长按图片时调用的函数 | function (event: GestureResponderEvent, image: ImageSource) | All | No | Yes | +| delayLongPress | 长按触发前的延迟时间(毫秒) | number | All | No | Yes | +| animationType | 模态框显示动画类型 | none, fade, slide | All | No | Yes | +| presentationStyle | 模态框展示样式: 默认为全屏，Android可使用overFullScreen隐藏状态栏 | fullScreen, pageSheet, formSheet, overFullScreen | All | No | Partially (Support "fullScreen", "overFullScreen") | +| backgroundColor | 模态框背景颜色(HEX格式) | string | All | No | Yes | +| swipeToCloseEnabled | 是否允许上下滑动关闭模态框 | boolean | All | No | Yes | +| doubleTapToZoomEnabled | 是否允许双击放大图片 | boolean | All | No | Yes | +| HeaderComponent | 头部组件，接收当前图片索引作为参数 | component, function | All | No | Yes | +| FooterComponent | 底部组件，接收当前图片索引作为参数 | component, function | All | No | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-localize.md b/zh-cn/react-native-localize.md index 476100a01cdfa157e27a65815288dfc26f13d176..ab0caccdd415fcb6e98b043c3b044e8844c29780 100644 --- a/zh-cn/react-native-localize.md +++ b/zh-cn/react-native-localize.md @@ -14,16 +14,16 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-localize) -该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-localize`，具体版本所属关系如下： -| Version | Package Name | Repository | Release | -| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| <= 3.1.0-0.0.1@deprecated | @react-native-oh-tpl/react-native-localize | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-localize) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-localize/releases) | -| > 3.1.0 | @react-native-ohos/react-native-localize | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-localize) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-localize/releases) | +请到三方库的 Releases 发布地址查看配套的版本信息： -## 安装与使用 +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------------------- | +| <= 3.1.0-0.0.1@deprecated | @react-native-oh-tpl/react-native-localize | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-localize) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-localize/releases) | 0.72 | +| 3.1.0 | @react-native-ohos/react-native-localize | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-localize) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-localize/releases) | 0.72 | +| 3.4.2 | @react-native-ohos/react-native-localize | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-localize) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-localize/releases) | 0.77 | -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-ohos/react-native-localize Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-localize/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 进入到工程目录并输入以下命令： @@ -120,14 +120,15 @@ export default LocalizeDemo; ``` ## 使用 Codegen - Version > @react-native-ohos/react-native-localize@3.1.0，已适配codegen-lib生成桥接代码。 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +**注意：** 0.77 不需要执行 Codegen。 + ## Link -Version > @react-native-ohos/react-native-localize@3.1.0，已支持 Autolink，无需手动配置，目前只支持72框架。 +Version > @react-native-ohos/react-native-localize@3.1.0，已支持 Autolink，无需手动配置。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md Version <= @react-native-oh-tpl/react-native-localize@3.1.0-0.0.1@deprecated 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 @@ -158,6 +159,17 @@ Version <= @react-native-oh-tpl/react-native-localize@3.1.0-0.0.1@deprecated 暂 打开 `entry/oh-package.json5`，添加以下依赖 +- 0.72 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-localize": "file:../../node_modules/@react-native-oh-tpl/react-native-localize/harmony/rn_localize.har" + } +``` + +- 0.77 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -178,13 +190,61 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNLocalizePackage +### 3. 配置 CMakeLists 和引入 RNLocalizePackage（仅0.77 需要） + +```diff +... + +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_END: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-localize/src/main/cpp" ./rn_localize) +# RNOH_END: manual_package_linking_1 + +add_library(rnoh_app SHARED + "./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_localize) +# RNOH_BEGIN: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" ++ #include "RNLocalizePackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { ++ std::make_shared(ctx) +} +``` + +### 4.在 ArkTs 侧引入 RNLocalizePackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... - +// 0.72 ++ import { RNLocalizePackage } from '@react-native-oh-tpl/react-native-localize/ts'; + +// 0.77 + import { RNLocalizePackage } from '@react-native-ohos/react-native-localize/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -195,7 +255,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -212,31 +272,32 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +在以下版本验证通过： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-ohos/react-native-localize Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-localize/releases) +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; -## API +## 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Required | Platform | HarmonyOS Support | -|---------------------------| ---------------------------------------------- | -------- |----------|-------------------| -| getLocales() | Returns the user preferred locales, in order. | No | All | yes | -| getNumberFormatSettings() | Returns number formatting settings. | No | All | yes | -| getCurrencies() | Returns the user preferred currency codes, in order. | No | All | yes | -| getCountry() | Returns the user current country code (based on its device locale, not on its position). | No | All | yes | -| getCalendar() | Returns the user preferred calendar format. | No | All | yes | -| getTemperatureUnit() | Returns the user preferred temperature unit. | No | All | No | -| getTimeZone() | Returns the user preferred timezone (based on its device settings, not on its position). | No | All | yes | -| uses24HourClock() | Returns true if the user prefers 24h clock format, false if they prefer 12h clock format. | No | All | yes | -| usesMetricSystem() | Returns true if the user prefers metric measure system, false if they prefer imperial. | No | All | No | -| usesAutoDateAndTime() | Tells if the automatic date & time setting is enabled on the phone. Android only | No | Android | No | -| usesAutoTimeZone() | Tells if the automatic time zone setting is enabled on the phone. Android only | No | Android | No | -| findBestLanguageTag() | Returns the best language tag possible and its reading direction | No | All | yes | +| Name | Description | Required | Platform | HarmonyOS Support | +| ---------------------------------------- | ------------------------------------------------------------ | -------- | -------- | ----------------- | +| getLocales() | 返回用户首选的语言环境，按顺序排列。 | No | All | yes | +| getNumberFormatSettings() | 返回数字格式设置。 | No | All | yes | +| getCurrencies() | 返回用户首选的货币代码，按顺序排列。 | No | All | yes | +| getCountry() | 返回用户当前的国家代码（基于设备语言环境，而不是位置）。 | No | All | yes | +| getCalendar() | 返回用户首选的日历格式。 | No | All | yes | +| getTemperatureUnit() | 返回用户首选的温度单位。 | No | All | No | +| getTimeZone() | 返回用户首选的时区（基于设备设置，而不是位置）。 | No | All | yes | +| uses24HourClock() | 如果用户喜欢24小时制则返回true，否则返回false。 | No | All | yes | +| usesMetricSystem() | 如果用户喜欢公制单位则返回true，否则返回false。 | No | All | No | +| usesAutoDateAndTime() | 告诉手机是否启用了自动日期和时间设置。仅限Android | No | Android | No | +| usesAutoTimeZone() | 告诉手机是否启用了自动时区设置。仅限Android | No | Android | No | +| findBestLanguageTag() | 返回最佳的语言标签及其阅读方向 | No | All | yes | ## 遗留问题 - [ ] HarmonyOS 侧无法获取温度及长度单位[issue#2](https://github.com/react-native-oh-library/react-native-localize/issues/2) diff --git a/zh-cn/react-native-safe-modules.md b/zh-cn/react-native-safe-modules.md index 3ce88e5003d5976884eed5f27f29a8e8fd6f3c0f..f871d30a4764daf8127ff6d5eec0ef9987f3b02d 100644 --- a/zh-cn/react-native-safe-modules.md +++ b/zh-cn/react-native-safe-modules.md @@ -15,16 +15,15 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-safe-modules) -## 安装与使用 - 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.0.3 | [@react-native-oh-tpl/react-native-safe-modules Releases](https://github.com/react-native-oh-library/react-native-safe-modules/releases) | 0.72 | -| 1.0.3 | [@react-native-ohos/react-native-safe-modules Releases]() | 0.77 | +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 1.0.3 | @react-native-oh-tpl/react-native-safe-modules | [Github](https://github.com/react-native-oh-library/react-native-safe-modules) | [Github Releases](https://github.com/react-native-oh-library/react-native-safe-modules/releases) | 0.72 | +| 1.1.0 | @react-native-ohos/react-native-safe-modules | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-safe-modules) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-safe-modules/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + +## 安装与使用 进入到工程目录并输入以下命令： @@ -33,20 +32,20 @@ #### **npm** ```bash -# V1.0.3 for RN0.72 +# 0.72 npm install @react-native-oh-tpl/react-native-safe-modules -# V1.0.3 for RN0.77 +# 0.77 npm install @react-native-ohos/react-native-safe-modules ``` #### **yarn** ```bash -# V1.0.3 for RN0.72 +# 0.72 yarn add @react-native-oh-tpl/react-native-safe-modules -# V1.0.3 for RN0.77 +# 0.77 yarn add @react-native-ohos/react-native-safe-modules ``` @@ -91,16 +90,12 @@ export default App; ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +在以下版本验证通过： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.0.3 | [@react-native-oh-tpl/react-native-safe-modules Releases](https://github.com/react-native-oh-library/react-native-safe-modules/releases) | 0.72 | -| 1.0.3 | [@react-native-ohos/react-native-safe-modules Releases]() | 0.77 | +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; -## API +## 属性 ### SafeModule.create(options) @@ -110,11 +105,11 @@ export default App; | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| options.moduleName | the name, or array of names, to look for the module at on the NativeModules namespace. | string/string[] | yes | iOS,Android | yes | -| options.mock | The mock implementation of the native module. | object | yes | iOS,Android | yes | -| options.getVersion | A function that returns the version of the native module. Only needed if you are specifying overrides and not exporting a VERSION property on your native module. Defaults to x => x.VERSION. | Function | no | iOS,Android | yes | -| options.versionOverrides | A map of version numbers to overridden implementations of the corresponding property/method. If an overridden property or method is a function, it will be called during SafeModule.create(...) with two arguments, the original value of that property on the original module, and the original module itself. The return value of this function will be put on the return value of SafeModule.create(...). | object | no | iOS,Android | yes | -| options.isEventEmitter | A flag indicating that the native module is expected to be an EventEmitter. Puts the EventEmitter instance on the emitter property of the resulting module. Defaults to false. | boolean | no | iOS,Android | yes | +| options.moduleName | 在 NativeModules 命名空间中查找模块的名称或名称数组。 | string/string[] | yes | iOS,Android | yes | +| options.mock | 原生模块的模拟实现。 | object | yes | iOS,Android | yes | +| options.getVersion | 返回原生模块版本的函数。仅在指定覆盖且未在原生模块上导出 VERSION 属性时才需要。默认值为 x => x.VERSION。 | Function | no | iOS,Android | yes | +| options.versionOverrides | 版本号到相应属性/方法的覆盖实现的映射。如果被覆盖的属性或方法是一个函数，在 SafeModule.create(...) 期间将使用两个参数调用它：原始模块上该属性的原始值和原始模块本身。该函数的返回值将放在 SafeModule.create(...) 的返回值上。 | object | no | iOS,Android | yes | +| options.isEventEmitter | 指示原生模块是否应为 EventEmitter 的标志。将 EventEmitter 实例放在结果模块的 emitter 属性上。默认为 false。 | boolean | no | iOS,Android | yes | ### SafeModule.module(options) @@ -124,11 +119,11 @@ export default App; | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| options.moduleName | the name, or array of names, to look for the module at on the NativeModules namespace. | string/string[] | yes | iOS,Android | yes | -| options.mock | The mock implementation of the native module. | object | yes | iOS,Android | yes | -| options.getVersion | A function that returns the version of the native module. Only needed if you are specifying overrides and not exporting a VERSION property on your native module. Defaults to x => x.VERSION. | Function | no | iOS,Android | yes | -| options.versionOverrides | A map of version numbers to overridden implementations of the corresponding property/method. If an overridden property or method is a function, it will be called during SafeModule.create(...) with two arguments, the original value of that property on the original module, and the original module itself. The return value of this function will be put on the return value of SafeModule.create(...). | object | no | iOS,Android | yes | -| options.isEventEmitter | A flag indicating that the native module is expected to be an EventEmitter. Puts the EventEmitter instance on the emitter property of the resulting module. Defaults to false. | boolean | no | iOS,Android | yes | +| options.moduleName | 在 NativeModules 命名空间中查找模块的名称或名称数组。 | string/string[] | yes | iOS,Android | yes | +| options.mock | 原生模块的模拟实现。 | object | yes | iOS,Android | yes | +| options.getVersion | 返回原生模块版本的函数。仅在指定覆盖且未在原生模块上导出 VERSION 属性时才需要。默认值为 x => x.VERSION。 | Function | no | iOS,Android | yes | +| options.versionOverrides | 版本号到相应属性/方法的覆盖实现的映射。如果被覆盖的属性或方法是一个函数，在 SafeModule.create(...) 期间将使用两个参数调用它：原始模块上该属性的原始值和原始模块本身。该函数的返回值将放在 SafeModule.create(...) 的返回值上。 | object | no | iOS,Android | yes | +| options.isEventEmitter | 指示原生模块是否应为 EventEmitter 的标志。将 EventEmitter 实例放在结果模块的 emitter 属性上。默认为 false。 | boolean | no | iOS,Android | yes | ### SafeModule.component(options) diff --git a/zh-cn/react-native-theme-control.md b/zh-cn/react-native-theme-control.md index 99bd689ec09bf68b90665edc880054cba051a88c..f9e3ed9fffbecdd5e1e4c9c5c552dc54a4ca39b8 100644 --- a/zh-cn/react-native-theme-control.md +++ b/zh-cn/react-native-theme-control.md @@ -14,16 +14,14 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-theme-control) -## 安装与使用 - 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 6.0.1 | [@react-native-oh-tpl/react-native-theme-control/Releases](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-theme-control%2Freleases) | 0.72 | -| 6.1.0 | [@react-native-ohos/react-native-theme-control/Releases]() | 0.77 | +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 6.0.1 | @react-native-oh-tpl/react-native-theme-control | [Github](https://github.com/react-native-oh-library/react-native-theme-control) | [Github Releases](https://github.com/react-native-oh-library/react-native-theme-control/releases) | 0.72 | +| 6.1.1 | @react-native-ohos/react-native-theme-control | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-theme-control) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-theme-control/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 进入到工程目录并输入以下命令： @@ -32,20 +30,20 @@ #### **npm** ```bash -# V6.0.1 +# 0.72 npm install @react-native-oh-tpl/react-native-theme-control -# V6.1.0 +# 0.77 npm install @react-native-ohos/react-native-theme-control ``` #### **yarn** ```bash -# V6.0.1 +# 0.72 yarn add @react-native-oh-tpl/react-native-theme-control -# V6.1.0 +# 0.77 yarn add @react-native-ohos/react-native-theme-control ``` @@ -112,7 +110,7 @@ export function SimpleScreen() { ## 使用 Codegen -> [!TIP] V6.1.0 不需要执行 Codegen。 +> [!TIP] 0.77 不需要执行 Codegen。 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 @@ -146,7 +144,7 @@ export function SimpleScreen() { 打开 `entry/oh-package.json5`，添加以下依赖 -- V6.0.1 +- 0.72 ```json "dependencies": { @@ -155,7 +153,7 @@ export function SimpleScreen() { } ``` -- V6.1.0 +- 0.77 ```json "dependencies": { @@ -179,7 +177,7 @@ ohpm install ### 3.配置 CMakeLists 和引入 RNThemeControlPackage -> [!TIP] V6.1.0 需要配置 CMakeLists 和引入 RNThemeControlPackage。 +> [!TIP] 0.77 需要配置 CMakeLists 和引入 RNThemeControlPackage。 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -236,10 +234,10 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... -// V6.0.1 +// 0.72 + import { RNThemeControlPackage } from '@react-native-oh-tpl/react-native-theme-control/ts' -// V6.1.0 +// 0.77 + import { RNThemeControlPackage } from '@react-native-ohos/react-native-theme-control/ts' export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -284,10 +282,10 @@ export default class MyAbilityStage extends AbilityStage { ```diff + import {RNAbility} from '@rnoh/react-native-openharmony'; + import Want from '@ohos.app.ability.Want'; -// V6.0.1 +// 0.72 + import { RNThemeControlModule } from '@react-native-oh-tpl/react-native-theme-control'; -// V6.1.0 +// 0.77 + import { RNThemeControlModule } from '@react-native-ohos/react-native-theme-control'; + export default class EntryAbility extends RNAbility { @@ -336,14 +334,11 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +在以下版本验证通过： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 6.0.1 | [@react-native-oh-tpl/react-native-theme-control/Releases](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-theme-control%2Freleases) | 0.72 | -| 6.1.0 | [@react-native-ohos/react-native-theme-control/Releases]() | 0.77 | +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## API @@ -353,14 +348,14 @@ ohpm install | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------ | ---------- | -------- | ----------- | ----------------- | -| `SystemBars` | Setting the System Status Bar | Components | No | IOS/Android | Yes | -| `NavigationBar` | Setting the Navigation Bar | Components | No | Android | No | -| `AppBackground` | Sets the background color of the UIApplication window (iOS) or the current Activity (Android). | Components | No | IOS/Android | Yes | -| `setNavbarAppearance` | Set the appearance of the navigation bar imperatively | Function | No | Android | No | -| `setAppBackground` | Set background color | Function | No | IOS/Android | Yes | -| `setThemePreference` | Set the theme | Function | No | IOS/Android | Yes | -| `getThemePreference` | Get Subject | Function | No | IOS/Android | Yes | -| `useThemePreference` | A React hook that returns the current theme preference, which might be dark, light (if you have set the theme before by calling setAppearance) or system. | Function | No | IOS/Android | Yes | +| `SystemBars` | 设置系统状态栏 | Components | No | IOS/Android | Yes | +| `NavigationBar` | 设置导航栏 | Components | No | Android | No | +| `AppBackground` | 设置 UIApplication 窗口（iOS）或当前 Activity（Android）的背景色 | Components | No | IOS/Android | Yes | +| `setNavbarAppearance` | 主动设置导航栏的外观 | Function | No | Android | No | +| `setAppBackground` | 设置背景颜色 | Function | No | IOS/Android | Yes | +| `setThemePreference` | 设置主题 | Function | No | IOS/Android | Yes | +| `getThemePreference` | 获取主题 | Function | No | IOS/Android | Yes | +| `useThemePreference` | 一个 React 钩子，返回当前的主题偏好，可能是暗色、亮色（如果您之前调用 setAppearance 设置过主题）或系统默认 | Function | No | IOS/Android | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-user-agent.md b/zh-cn/react-native-user-agent.md index 0181d062c859158b9362617a02b6d5798f71a837..219adc5220500ee2076514b50e668be916a7fa71 100644 --- a/zh-cn/react-native-user-agent.md +++ b/zh-cn/react-native-user-agent.md @@ -16,9 +16,14 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-user-agent) -## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| Version | Package Name | Repository | Release | RN Version | +| ------------------------------ | --------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 2.3.1 | @react-native-oh-tpl/react-native-user-agent | [Github](https://github.com/react-native-oh-library/react-native-user-agent) | [Github Releases](https://github.com/react-native-oh-library/react-native-user-agent/releases) | 0.72 | +| 2.4.0 | @react-native-ohos/react-native-user-agent | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-user-agent) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-user-agent/releases) | 0.77 | -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-user-agent Releases](https://github.com/react-native-oh-library/react-native-user-agent/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 进入到工程目录并输入以下命令： @@ -27,13 +32,21 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-user-agent + +# 0.77 +npm install @react-native-ohos/react-native-user-agent ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-user-agent + +# 0.77 +yarn add @react-native-ohos/react-native-user-agent ``` @@ -87,6 +100,8 @@ export default function UserAgentExample() { 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +**注意：** 0.77 不需要执行 Codegen。 + ## Link 目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 @@ -117,6 +132,8 @@ export default function UserAgentExample() { 打开 `entry/oh-package.json5`，添加以下依赖 +- 0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -124,6 +141,15 @@ export default function UserAgentExample() { } ``` +- 0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-user-agent": "file:../../node_modules/@react-native-ohos/react-native-user-agent/harmony/user_agent.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -137,15 +163,78 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNUserAgentPackage +### 3.配置 CMakeLists 和引入 UserAgent + +>注：0.77 不需要配置 CMakeLists 。 + +```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_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@rnoh/react-native-openharmony/src/main/cpp") ++ set(USER_AGENT_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@react-native-ohos/react-native-user-agent/src/main/cpp") +set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated") +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(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") + +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +# (VM) Define a variable and assign it to the current module's cpp directory +set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR}) + +# Add the Header File directory, including cpp, cpp/include, and tell cmake to find the Header Files introduced by the code here +include_directories(${NATIVERENDER_ROOT_PATH} + ${NATIVERENDER_ROOT_PATH}/include) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) ++ add_subdirectory("${USER_AGENT_CPP_DIR}" ./user_agent) + + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) ++ target_link_libraries(rnoh_app PUBLIC user_agent) +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" ++#include "generated/UserAgentPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) +{ + return { ++ std::make_shared(ctx), + }; +} +``` + + + +### 4.在 ArkTs 侧引入 RNUserAgentPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... - +// 0.72 + import { RNUserAgentPackage } from '@react-native-oh-tpl/react-native-user-agent/ts'; +// 0.77 ++ import { RNUserAgentPackage } from '@react-native-ohos/react-native-user-agent/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ + new RNUserAgentPackage(ctx) @@ -153,7 +242,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -170,9 +259,10 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +在以下版本验证通过： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-user-agent Releases](https://github.com/react-native-oh-library/react-native-user-agent/releases) +1. RNOH:0.72.28; SDK:HarmonyOS NEXT DB2; IDE:DevEco Studio 5.0.3.500; ROM:3.0.0.28; +2. RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12; ## 属性 @@ -182,17 +272,17 @@ ohpm install | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| systemName | System Name | string | no | All | yes | -| systemVersion | System Version | string | no | All | yes | -| applicationName | Application Name | string | no | All | yes | -| applicationVersion | Application Version | string | no | All | yes | -| buildNumber | Build Number | string | no | All | yes | -| darwinVersion | Darwin Version | string | no | iOS | no | -| cfnetworkVersion | Cfnetwork Version | string | no | iOS | no | -| modelName | Model Name | string | no | iOS | no | -| deviceName | Device Name | string | no | iOS | no | - -## API +| systemName | 系统名称 | string | no | All | yes | +| systemVersion | 系统版本 | string | no | All | yes | +| applicationName | 应用名称 | string | no | All | yes | +| applicationVersion | 应用版本 | string | no | All | yes | +| buildNumber | 构建编号 | string | no | All | yes | +| darwinVersion | Darwin 版本 | string | no | iOS | no | +| cfnetworkVersion | Cfnetwork 版本 | string | no | iOS | no | +| modelName | 型号名称 | string | no | iOS | no | +| deviceName | 设备名称 | string | no | iOS | no | + +## 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -200,8 +290,8 @@ ohpm install | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| getUserAgent | Get user agent synchronously | string | no | All | yes | -| getWebViewUserAgent | Get user agent asynchronously | Promise | no | All | yes | +| getUserAgent | 同步获取用户代理 | string | no | All | yes | +| getWebViewUserAgent | 异步获取用户代理 | Promise | no | All | yes | ## 遗留问题 diff --git a/zh-cn/react-native-walkthrough-tooltip.md b/zh-cn/react-native-walkthrough-tooltip.md index 62f5e0d869875f8350f4f89691266e870c7cf345..6de5c89a1da08c9097cce2dfdd8d9b249624c20b 100644 --- a/zh-cn/react-native-walkthrough-tooltip.md +++ b/zh-cn/react-native-walkthrough-tooltip.md @@ -15,6 +15,13 @@ >[!TIP] [Github 地址](https://github.com/jasongaare/react-native-walkthrough-tooltip) + +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 1.6.0 | 0.72/0.77 | + ## 安装与使用 进入到工程目录并输入以下命令：