diff --git a/en/baronha-ting.md b/en/baronha-ting.md
index d2352e60c87bd9c6a19d276a3c9455386780cacc..4d632cd21b67cc5a3888a202ec9c79d0b1ccb254 100644
--- a/en/baronha-ting.md
+++ b/en/baronha-ting.md
@@ -4,7 +4,7 @@
@baronha/ting
-
+
@@ -12,38 +12,51 @@
-> [!TIP] [GitHub address](https://github.com/react-native-oh-library/ting)
+> [!TIP] [Github Address](https://github.com/react-native-oh-library/ting)
-## Installation and Usage
+The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/ting`. The specific version relationships are as follows:
-Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/ting Releases](https://github.com/react-native-oh-library/ting/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package.
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 1.2.2 | @react-native-oh-tpl/ting | [Github](https://github.com/react-native-oh-library/ting) | [Github Releases](https://github.com/react-native-oh-library/async-storage/releases) | 0.72 |
+| 1.3.0 | @react-native-ohos/ting | [GitCode](https://gitcode.com/openharmony-sig/rntpc_ting) | [GitCode Releases]() | 0.77 |
-Go to the project directory and execute the following instruction:
+## Installation and Usage
+For older versions not published to npm, please refer to the [Installation Guide](/en/tgz-usage.md) to install the tgz package.
+Navigate to your project directory and enter the following commands:
#### **npm**
```bash
+# V1.2.2
npm install @react-native-oh-tpl/ting
+
+# V1.3.0
+npm install @react-native-ohos/ting
```
#### **yarn**
```bash
+# V1.2.2
yarn add @react-native-oh-tpl/ting
+
+# V1.3.0
+yarn add @react-native-ohos/ting
```
-The following code shows the basic use scenario of the repository:
+The following code demonstrates basic usage scenarios of this library:
-> [!WARNING] The name of the imported repository remains unchanged.
+> [!WARNING] The library name in the import statement remains unchanged.
```js
-import { View } from "react-native";
+import { View, Button } from "react-native";
import {
ToastOptions,
toast
@@ -55,34 +68,35 @@ function handleToast(options: ToastOptions) {
const App = () => {
return (
-
- {
- const options: ToastOptions = {
- title: 'title-Toast',
- message: 'message-Toast',
- };
- handleToast(options);
- }}
- />
+
+ {
+ const options: ToastOptions = {
+ title: 'title-Toast',
+ message: 'message-Toast',
+ };
+ handleToast(options);
+ }}
+ />
+ );
};
export default App;
```
-## Use Codegen
+## Using 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 for `Codegen`. Before use, you need to actively generate the third-party library bridging code. Please refer to the [Codegen Usage Documentation](/en/codegen.md) for details.
## 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 requires manual configuration.
-Open the `harmony` directory of the HarmonyOS project in DevEco Studio.
+First, use DevEco Studio to open the HarmonyOS project `harmony` within your project.
-### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project
+### 1. Add the overrides field to the root `oh-package.json5`
```json
{
@@ -93,15 +107,20 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio.
}
```
-### 2. Introducing Native Code
+### 2. Import Native Code
-Currently, two methods are available:
+There are currently two methods:
-Method 1 (recommended): Use the HAR file.
+1. Import via har package (This method will be deprecated after IDE features are improved; currently the preferred method);
+2. Link source code directly.
-> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library.
+Method 1: Import via har package (Recommended)
-Open `entry/oh-package.json5` file and add the following dependencies:
+> [!TIP] The har package is located in the `harmony` folder of the third-party library installation path.
+
+Open `entry/oh-package.json5` and add the following dependencies:
+
+- V1.2.2
```json
"dependencies": {
@@ -110,27 +129,87 @@ Open `entry/oh-package.json5` file and add the following dependencies:
}
```
-Click the `sync` button in the upper right corner.
+- V1.3.0
+
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+ "@react-native-ohos/ting": "file:../../node_modules/@react-native-ohos/ting/harmony/ting.har"
+}
+```
+
+Click the `sync` button in the top right corner.
-Alternatively, run the following instruction on the terminal:
+Or execute in the terminal:
```bash
cd entry
ohpm install
```
-Method 2: Directly link to the source code.
+Method 2: Link Source Code Directly
+
+> [!TIP] If you need to link source code directly, please refer to the [Direct Link Source Code Instructions](/en/link-source-code.md).
+
+### 3. Configure CMakeLists and Import RNTingPackage
+
+> V1.3.0 requires configuring CMakeLists and importing RNTingPackage.
+
+```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/Ting/src/main/cpp" ./ting)
+# 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_ting)
+# RNOH_BEGIN: manual_package_linking_2
+```
+
+Open `entry/src/main/cpp/PackageProvider.cpp` and add:
+
+```diff
+#include "RNOH/PackageProvider.h"
++ #include "TingPackage.h"
+
+using namespace rnoh;
-> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md).
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
++ std::make_shared(ctx)
+}
+```
-### 3. Introducing RNTingPackage to ArkTS
+### 4. Import RNTingPackage on the ArkTs Side
-Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
+Open `entry/src/main/ets/RNPackagesFactory.ets` and add:
```diff
...
+// V1.2.2
+ import {RNTingPackage} from '@react-native-oh-tpl/ting';
+// V1.3.0
++ import {RNTingPackage} from '@react-native-ohos/ting';
+
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -139,26 +218,28 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
}
```
-### 4. Running
+### 5. Run
-Click the `sync` button in the upper right corner.
+Click the `sync` button in the top right corner.
-Alternatively, run the following instruction on the terminal:
+Or execute in the terminal:
```bash
cd entry
ohpm install
```
-Then build and run the code.
+Then compile and run.
-## 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.
+To use this library, you need to use the correct React-Native and RNOH versions. Additionally, you need to use the matching DevEco Studio and phone ROM.
-Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/ting Releases](https://github.com/react-native-oh-library/ting/releases)
+Verified successfully in the following versions:
+1. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+2. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
## Properties
@@ -217,11 +298,11 @@ Check the release version information in the release address of the third-party
## Known Issues
-- [ ] AlertOptions 和 ToastOptions 中的 preset：done，动画效果未实现。[issue#3](https://github.com/react-native-oh-library/ting/issues/3)
+- [ ] preset in AlertOptions and ToastOptions: The animation effect for 'done' is not implemented. [issue#3](https://github.com/react-native-oh-library/ting/issues/3)
## Others
-- AlertOptions 中的 blurBackdrop 参数配置后，iOS 不支持，Android 无效果。
+- After configuring the blurBackdrop parameter in AlertOptions, it is not supported on iOS and has no effect on Android.
## License
diff --git a/en/react-content-loader.md b/en/react-content-loader.md
index e98c4b4e0d7bc9aecaa7a3ea458f8b2e5ce557d6..578056d2f37bcaff9af4459ebe93983246e473cf 100644
--- a/en/react-content-loader.md
+++ b/en/react-content-loader.md
@@ -14,26 +14,39 @@
> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-content-loader)
-## Installation and Usage
+The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/react-content-loader`. The specific version relationships are as follows:
-Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-content-loader Releases](https://github.com/react-native-oh-library/react-content-loader/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package.
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 7.0.2 | @react-native-oh-tpl/react-content-loader | [Github](https://github.com/react-native-oh-library/react-content-loader) | [Github Releases](https://github.com/react-native-oh-library/react-content-loader/releases) | 0.72 |
+| 7.1.0 | @react-native-ohos/react-content-loader | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-content-loader) | [GitCode Releases]() | 0.77 |
-Go to the project directory and execute the following instruction:
+## Installation and Usage
+For older versions not published to npm, please refer to the [Installation Guide](/en/tgz-usage.md) to install the tgz package.
+Go to the project directory and execute the following instruction:
#### **npm**
```bash
+# V7.0.2 for RN0.72
npm install @react-native-oh-tpl/react-content-loader
+
+# V7.1.0 for RN0.77
+npm install @react-native-ohos/react-content-loader
```
#### **yarn**
```bash
+# V7.0.2 for RN0.72
yarn add @react-native-oh-tpl/react-content-loader
+
+# V7.1.0 for RN0.77
+yarn add @react-native-ohos/react-content-loader
```
@@ -91,7 +104,9 @@ If it is not included, follow the guide provided in [@react-native-oh-tpl/react-
To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
-Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-content-loader Releases](https://github.com/react-native-oh-library/react-content-loader/releases)
+This document is verified based on the following versions:
+1. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+2. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
## Properties
@@ -120,6 +135,7 @@ Check the release version information in the release address of the third-party
## Known Issues
+
- [ ] beforeMaskProperties 设置非 svg 暴露出来的组件时无效: [issue#256](https://github.com/react-native-oh-library/react-native-harmony-svg/issues/256)
## Others
diff --git a/en/react-native-charts-wrapper.md b/en/react-native-charts-wrapper.md
index b04221c0a5908624dff1a7fff74e780e26644c8c..61c46d80f47bd693eea2f19189d681f7428b21e6 100644
--- a/en/react-native-charts-wrapper.md
+++ b/en/react-native-charts-wrapper.md
@@ -14,26 +14,40 @@ Template version: v0.2.2
> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-charts-wrapper)
+The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/react-native-charts-wrapper`. The specific version relationships are as follows:
+
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 0.6.0 | @react-native-oh-tpl/react-native-charts-wrapper | [Github](https://github.com/react-native-oh-library/react-native-charts-wrapper) | [Github Releases](https://github.com/react-native-oh-library/react-native-charts-wrapper/releases) | 0.72 |
+| 0.7.0 | @react-native-ohos/react-native-charts-wrapper | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-charts-wrapper) | [GitCode Releases]() | 0.77 |
+
## Installation and Usage
-Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-charts-wrapper/Releases](https://github.com/react-native-oh-library/react-native-charts-wrapper/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.
+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:
-
#### **npm**
```bash
+# 0.6.0
npm install @react-native-oh-tpl/react-native-charts-wrapper
+
+# 0.7.0
+npm install @react-native-ohos/react-native-charts-wrapper
```
#### **yarn**
```bash
+# 0.6.0
yarn add @react-native-oh-tpl/react-native-charts-wrapper
+
+# 0.7.0
+yarn add @react-native-ohos/react-native-charts-wrapper
```
@@ -104,6 +118,7 @@ Method 1 (recommended): Use the HAR file.
Open `entry/oh-package.json5` file and add the following dependencies:
+- 0.6.0
```json
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
@@ -111,6 +126,14 @@ Open `entry/oh-package.json5` file and add the following dependencies:
}
```
+- 0.7.0
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+ "@react-native-ohos/react-native-charts-wrapper": "file:../../node_modules/@react-native-ohos/react-native-charts-wrapper/harmony/charts_wrapper.har"
+ }
+```
+
Click the `sync` button in the upper right corner.
Alternatively, run the following instruction on the terminal:
@@ -130,6 +153,7 @@ Find `function buildCustomRNComponent()`, which is usually located in `entry/src
```diff
...
+ // 0.6.0
+ import {
+ BarCharts,
+ LineCharts,
@@ -142,6 +166,19 @@ Find `function buildCustomRNComponent()`, which is usually located in `entry/src
+ CombinedCharts
+ } from "@react-native-oh-tpl/react-native-charts-wrapper"
+ // 0.7.0
++ import {
++ BarCharts,
++ LineCharts,
++ HorizontalBarCharts,
++ BubbleCharts,
++ PieCharts,
++ RadarCharts,
++ ScatterCharts,
++ CandleStickCharts,
++ CombinedCharts
++ } from "@react-native-ohos/react-native-charts-wrapper"
+
@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
...
@@ -230,8 +267,12 @@ Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following co
```diff
...
+ // 0.6.0
+ import {ChartsWrapperPackage} from '@react-native-oh-tpl/react-native-charts-wrapper/ts';
+ // 0.7.0
++ import {ChartsWrapperPackage} from '@react-native-ohos/react-native-charts-wrapper/ts';
+
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -259,7 +300,9 @@ Then build and run the code.
To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
-Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-charts-wrapper/Releases](https://github.com/react-native-oh-library/react-native-charts-wrapper/releases)
+This document is verified based on the following versions:
+1. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+2. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
## Properties
diff --git a/en/react-native-file-selector.md b/en/react-native-file-selector.md
index 09429844e0064858731d079b73d0badc259052da..ce0806f4b8683c19abf918df4c2d19286cba699a 100644
--- a/en/react-native-file-selector.md
+++ b/en/react-native-file-selector.md
@@ -14,25 +14,35 @@
> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-file-selector)
-## 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-file-selector Releases](https://github.com/react-native-oh-library/react-native-file-selector/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.
+The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/react-native-file-selector`. The specific version relationships are as follows:
-Go to the project directory and execute the following instruction:
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 1.0.2 | @react-native-oh-tpl/react-native-file-selector | [Github](https://github.com/react-native-oh-library/react-native-file-selector) | [Github Releases](https://github.com/react-native-oh-library/react-native-file-selector/releases) | 0.72 |
+|1.1.0 | @react-native-ohos/react-native-file-selector | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-file-selector) | [GitCode Releases]() | 0.77 |
+## Installation and Usage
+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:
#### **npm**
```bash
+# 1.0.2
npm install @react-native-oh-tpl/react-native-file-selector
+# 1.1.0
+npm install @react-native-ohos/react-native-file-selector
```
#### **yarn**
```bash
+# 1.0.2
yarn add @react-native-oh-tpl/react-native-file-selector
+# 1.1.0
+yarn add @react-native-ohos/react-native-file-selector
```
@@ -88,6 +98,7 @@ Method 1 (recommended): Use the HAR file.
Open entry/oh-package.json5 file and add the following dependencies:
+- V1.0.2
```json
"dependencies": {
"@rnoh/react-native-openharmony" : "file:../react_native_openharmony",
@@ -95,6 +106,13 @@ Open entry/oh-package.json5 file and add the following dependencies:
}
```
+- V1.1.0
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony" : "file:../react_native_openharmony",
+ "@react-native-ohos/react-native-file-selector": "file:../../node_modules/@react-native-ohos/react-native-file-selector/harmony/file_selector.har"
+ }
+```
Click the sync button in the upper right corner.
Alternatively, run the following instruction on the terminal:
@@ -116,7 +134,10 @@ Open the entry/src/main/ets/RNPackagesFactory.ts file and add the following code
```diff
...
import type {RNPackageContext, RNPackage} from '@rnoh/react-native-openharmony/ts';
+// V1.0.2
+import {RNFileSelectorPackage} from '@react-native-oh-tpl/react-native-file-selector/ts';
+// V1.1.0
++import {RNFileSelectorPackage} from '@react-native-ohos/react-native-file-selector/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
@@ -145,7 +166,9 @@ Then build and run the code.
To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
-Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-file-selector Releases](https://github.com/react-native-oh-library/react-native-file-selector/releases)
+This document is verified based on the following versions:
+1. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+2. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
## Properties
diff --git a/en/react-native-popover-view.md b/en/react-native-popover-view.md
index 0bc31fff51e7e3edf52c97903f31e15a80ebf388..a427df8c5e692a30900ebf9aef025d7179d6eb32 100644
--- a/en/react-native-popover-view.md
+++ b/en/react-native-popover-view.md
@@ -15,21 +15,19 @@
> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-popover-view)
-## Installation and Usage
+The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/react-native-popover-view`. The specific version relationships are as follows:
-Find the matching version information in the release address of a third-party library:
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 5.1.7 | @react-native-oh-tpl/react-native-popover-view | [Github](https://github.com/react-native-oh-library/react-native-popover-view) | [Github Releases](https://github.com/react-native-oh-library/react-native-popover-view/releases) | 0.72 |
+| 6.1.1 | @react-native-ohos/react-native-popover-view | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-popover-view) | [GitCode Releases]() | 0.77 |
-| third-party version | publish info | RN version |
-| ---------- | ------------------------------------------------------------ | ---------- |
-| 5.1.7 | [<@react-native-oh-tpl/react-native-popover-view> Releases](https://github.com/react-native-oh-library/react-native-popover-view/releases) | 0.72 |
-| 6.1.0 | [<@react-native-ohos/react-native-popover-view> Releases]() | 0.77 |
+## Installation and Usage
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:
-
-
#### npm
@@ -37,8 +35,9 @@ Go to the project directory and execute the following instruction:
```bash
# V5.1.7
npm install @react-native-oh-tpl/react-native-popover-view
-# V6.1.0
-yarn add @react-native-ohos/react-native-popover-view
+
+# V6.1.1
+npm install @react-native-ohos/react-native-popover-view
```
#### yarn
@@ -46,7 +45,8 @@ yarn add @react-native-ohos/react-native-popover-view
```bash
# V5.1.7
yarn add @react-native-oh-tpl/react-native-popover-view
-# V6.1.0
+
+# V6.1.1
yarn add @react-native-ohos/react-native-popover-view
```
@@ -153,13 +153,17 @@ export default PopoverDemo;
## Constraints
-#### Compatibility
+### Compatibility
+
+To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
This document is verified based on the following versions:
-1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：205.0.0.18;
+1. RNOH:0.72.20; SDK:HarmonyOS NEXT Developer Preview2; IDE:DevEco Studio 5.0.3.200; ROM:205.0.0.18;
+1. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+2. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
-## Properties
+### Properties & Methods
> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
@@ -186,9 +190,9 @@ This document is verified based on the following versions:
| animationConfig | An object containing any configuration options that can be passed to Animated.timing (e.g. { duration: 600, easing: Easing.inOut(Easing.quad) }). The configuration options you pass will override the defaults for all animations. | object | no | All | yes |
| displayArea | Area where the popover is allowed to be displayed. By default, this will be automatically calculated to be the size of the display, or the size of the parent component if mode is not 'rn-modal'. | rect | no | All | yes |
| displayAreaInsets | Insets to apply to the display area. The Popover will not be allowed to go beyond the display area minus the insets. | object | no | All | yes |
-| statusBarTranslucent | For 'rn-modal' mode on Android only. Determines whether the background should go under the status bar. Passed through to RN Modal component, see their docs as well. | bool | no | Android | no | Android only |
-| verticalOffset | The amount to vertically shift the popover on the screen, for use in correcting an occasional issue on Android. In certain Android configurations, you may need to apply a verticalOffset of -StatusBar.currentHeight for the popover to originate from the correct place. For shifting the popover in other situations, the offset prop should be used. | number | no | Android | no | Android only |
-| debug | Set this to true to turn on debug logging to the console. This is useful for figuring out why a Popover isn't showing. | bool | no | All | yes |
+| statusBarTranslucent | For 'rn-modal' mode on Android only. Determines whether the background should go under the status bar. Passed through to RN Modal component, see their docs as well. | bool | no | Android | no | Android Only |
+| verticalOffsetdeprecated from 6.1.1 | The amount to vertically shift the popover on the screen, for use in correcting an occasional issue on Android. In certain Android configurations, you may need to apply a verticalOffset of -StatusBar.currentHeight for the popover to originate from the correct place. For shifting the popover in other situations, the offset prop should be used. | number | no | Android | no | Android Only |
+| debug | Set this to true to turn on debug logging to the console. This is useful for figuring out why a Popover isn't showing. | bool | no | All | yes ||
## Known Issues
diff --git a/en/react-native-qrcode-svg.md b/en/react-native-qrcode-svg.md
index 9c67dcbf4093579292d18eaf4420cd403d1e3b7d..8ccc12cb37d6faed8f201feaa58bb5f0ab5453ac 100644
--- a/en/react-native-qrcode-svg.md
+++ b/en/react-native-qrcode-svg.md
@@ -14,6 +14,11 @@
> [!TIP] [GitHub address](https://github.com/awesomejerry/react-native-qrcode-svg)
+| Version | Supported RN Version |
+| ----- | -------------------- |
+| 6.2.0 | 0.72 |
+| 6.3.20 | 0.77 |
+
## Installation and Usage
Go to the project directory and execute the following instruction:
@@ -23,13 +28,21 @@ Go to the project directory and execute the following instruction:
#### **npm**
```bash
+# V6.2.0
npm install react-native-qrcode-svg@6.2.0
+
+# V6.3.20
+npm install react-native-qrcode-svg@6.3.20
```
#### **yarn**
```bash
+# V6.2.0
yarn add react-native-qrcode-svg@6.2.0
+
+# V6.3.20
+yarn add react-native-qrcode-svg@6.3.20
```
@@ -50,8 +63,7 @@ export const SvgDemo = () => {
)
@@ -70,7 +82,10 @@ If it is not included, follow the guide provided in [@react-native-oh-tpl/react-
This document is verified based on the following versions:
-1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.400; ROM: 3.0.0.25;
+1. RNOH:0.72.27; SDK:HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE:DevEco Studio 5.0.3.400; ROM:3.0.0.25;
+2. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+3. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+
## Properties
@@ -87,7 +102,7 @@ This document is verified based on the following versions:
| `enableLinearGradient` | enables or disables linear gradient | boolean | No | iOS,Android | yes |
| `linearGradient` | array of 2 rgb colors used to create the linear gradient | string[] | No | iOS,Android | yes |
| `gradientDirection` | the direction of the linear gradient | string | No | iOS,Android | yes |
-| `logo` | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')} | object | No | iOS,Android | yes |
+| `logo` | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')} | V6.2.0 : `ImageSourcePropType` 6.3.20+ | SVG to render as logo. Can be either a svg string or a React component if you're using ex: '@svgr/webpack' or similar. In case both this prop and `logo` are provided, then this prop takes precedence and `logo` will be ignored. | React.FC \| string | No | All | yes |
+| `logoColor`6.3.20+ | If the logo is provided via `logoSVG` prop, this color will be set as it's `fill` property, otherwise it does nothing | string | No | All | yes |
+| `testID`6.3.20+ | testID for testing | string | No | All | yes |
## Known Issues
diff --git a/en/react-native-quick-base64.md b/en/react-native-quick-base64.md
index ab33c78b225df3a4e37ed30fb0fbffd026f820d2..75969f681045a0f83574368aa0442a66e219f47b 100644
--- a/en/react-native-quick-base64.md
+++ b/en/react-native-quick-base64.md
@@ -14,9 +14,16 @@
> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-quick-base64)
+The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/react-native-quick-base64`. The specific version relationships are as follows:
+
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 2.1.2 | @react-native-oh-tpl/react-native-quick-base64 | [Github](https://github.com/react-native-oh-library/react-native-quick-base64) | [Github Releases](https://github.com/react-native-oh-library/react-native-quick-base64/releases) | 0.72 |
+| 2.2.0 | @react-native-ohos/react-native-quick-base64 | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-quick-base64) | [GitCode Releases]() | 0.77 |
+
## Installation and Usage
-Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-quick-base64 Releases](https://github.com/react-native-oh-library/react-native-quick-base64/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.
+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:
@@ -25,13 +32,21 @@ Go to the project directory and execute the following instruction:
#### **npm**
```bash
+# 2.1.2
npm install @react-native-oh-tpl/react-native-quick-base64
+
+# 2.2.0
+npm install @react-native-ohos/react-native-quick-base64
```
#### **yarn**
```bash
+# 2.1.2
yarn add @react-native-oh-tpl/react-native-quick-base64
+
+# 2.2.0
+yarn add @react-native-ohos/react-native-quick-base64
```
@@ -43,8 +58,13 @@ The following code shows the basic use scenario of the repository:
```js
import React, { useState } from 'react';
import { Text, View, TextInput, ScrollView, StyleSheet, Button } from 'react-native';
+
+// 2.1.2
import { byteLength, btoa, atob, toByteArray, fromByteArray, getNative, trimBase64Padding, shim } from '@react-native-oh-tpl/react-native-quick-base64';
+// 2.2.0
+import { byteLength, btoa, atob, toByteArray, fromByteArray, getNative, trimBase64Padding, shim } from '@react-native-ohos/react-native-quick-base64';
+
type FuncBase64ToArrayBuffer = (
data: string,
removeLinebreaks?: boolean
@@ -402,7 +422,7 @@ Method 1 (recommended): Use the HAR file.
> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library.
Open `entry/oh-package.json5` file and add the following dependencies:
-
+- 2.1.2
```json
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
@@ -411,6 +431,15 @@ Open `entry/oh-package.json5` file and add the following dependencies:
}
```
+- 2.2.0
+```json
+ "dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+
+ "@react-native-ohos/react-native-quick-base64": "file:../../node_modules/@react-native-ohos/react-native-quick-base64/harmony/rn_quick_base64.har"
+ }
+```
+
Click the `sync` button in the upper right corner.
Alternatively, run the following instruction on the terminal:
@@ -424,7 +453,7 @@ Method 2: Directly link to the source code.
> [!TIP] or details, see [Directly Linking Source Code](/en/link-source-code.md).
-### 3. Configuring CMakeLists and Introducing GestureHandlerPackage
+### 3. Configuring CMakeLists and Introducing RNQuickBase64Package
Open `entry/src/main/cpp/CMakeLists.txt` and add the following code:
@@ -446,7 +475,12 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn)
# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+
+# 2.1.2
+ add_subdirectory("${OH_MODULE_DIR}/@react-native-oh-tpl/react-native-quick-base64/src/main/cpp" ./rn_quick_base64)
+
+# 2.2.0
++ add_subdirectory("${OH_MODULE_DIR}/@react-native-ohos/react-native-quick-base64/src/main/cpp" ./rn_quick_base64)
# RNOH_END: manual_package_linking_1
file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
@@ -481,13 +515,17 @@ std::vector> PackageProvider::getPackages(Package::Cont
}
```
-### 4. Introducing Gesture Handler Package to ArkTS
+### 4. Introducing RNQuickBase64Package to ArkTS
Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
+ // 2.1.2
+ import { RNQuickBase64Package } from '@react-native-oh-tpl/react-native-quick-base64/ts';
+ // 2.2.0
++ import { RNQuickBase64Package } from '@react-native-ohos/react-native-quick-base64/ts';
+
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -515,7 +553,10 @@ Then build and run the code.
To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
-Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-quick-base64 Releases](https://github.com/react-native-oh-library/react-native-quick-base64/releases)
+This document is verified based on the following versions:
+1. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+2. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+
> [!TIP] [Official Documenttation](https://github.com/craftzdog/react-native-quick-base64)
diff --git a/en/react-native-root-toast.md b/en/react-native-root-toast.md
index 482d8e46cb1a65b597323b3b09443df54660e708..c5d52eadccc872e89fd89646dd5fa26bf20c2d8b 100644
--- a/en/react-native-root-toast.md
+++ b/en/react-native-root-toast.md
@@ -13,7 +13,11 @@
-> [!TIP] [GitHub address](https://github.com/magicismight/react-native-root-toast/tree/v3.5.1)
+> [!TIP] [GitHub address](https://github.com/magicismight/react-native-root-toast)
+
+| Version |Supported RN Version |
+| -------- | -------------------- |
+| 4.0.1 | 0.72 / 0.77|
## Installation and Usage
@@ -24,13 +28,13 @@ Go to the project directory and execute the following instruction:
#### **npm**
```bash
-npm install react-native-root-toast@3.5.1
+npm install react-native-root-toast@4.0.1
```
#### **yarn**
```bash
-yarn add react-native-root-toast@3.5.1
+yarn add react-native-root-toast@4.0.1
```
@@ -77,10 +81,13 @@ export function ReactNativeRootToastExample() {
### Compatibility
+To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
+
This document is verified based on the following versions:
-1. RNOH: 0.72.20-CAPI; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18;
-2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+1. RNOH: 0.72.20-CAPI; SDK:HarmonyOS NEXT Developer Beta1; IDE:DevEco Studio 5.0.3.200; ROM:3.0.0.18;
+2. RNOH:0.72.33; SDK:OpenHarmony 5.0.0.71(API Version 12 Release); IDE:DevEco Studio 5.0.3.900; ROM:NEXT.0.0.71;
+3. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
## Properties
diff --git a/en/react-native-safe-area-context.md b/en/react-native-safe-area-context.md
index 97e08bcdddb9dc17149d18bc3bd52dae14a76cae..b1088569caca6fae916a65e018bddd6138880156 100644
--- a/en/react-native-safe-area-context.md
+++ b/en/react-native-safe-area-context.md
@@ -1,4 +1,4 @@
-> Template version: v0.2.2
+> Template Version: v0.2.2
react-native-safe-area-context
@@ -12,35 +12,48 @@
-> [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-safe-area-context)
+> [!TIP] [Github Address](https://gitcode.com/openharmony-sig/rntpc_react-native-safe-area-context)
-## Installation and Usage
+The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/react-native-safe-area-context`. The specific version relationships are as follows:
-Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-safe-area-context Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package.
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 4.7.4 | @react-native-oh-tpl/react-native-safe-area-context | [Github](https://github.com/react-native-oh-library/react-native-safe-area-context) | [Github Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) | 0.72 |
+| 5.1.1 | @react-native-ohos/react-native-safe-area-context | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-safe-area-context) | [GitCode Releases]() | 0.77 |
-Go to the project directory and execute the following instruction:
+## Installation and Usage
+For older versions not published to npm, please refer to the [Installation Guide](/en/tgz-usage.md) to install the tgz package.
+Navigate to your project directory and enter the following commands:
#### **npm**
```bash
+# V4.7.4
npm install @react-native-oh-tpl/react-native-safe-area-context
+
+# V5.1.1
+npm install @react-native-ohos/react-native-safe-area-context
```
#### **yarn**
```bash
+# V4.7.4
yarn add @react-native-oh-tpl/react-native-safe-area-context
+
+# V5.1.1
+yarn add @react-native-ohos/react-native-safe-area-context
```
-The following code shows the basic use scenario of the repository:
+The following code demonstrates a basic usage scenario of this library:
-> [!WARNING] The name of the imported repository remains unchanged.
+> [!WARNING] The import library name remains unchanged during use.
```js
import React from "react";
@@ -55,7 +68,7 @@ const App = () => {
return (
-
+
hello
@@ -68,11 +81,11 @@ export default App;
## 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 requires manual configuration.
-Open the `harmony` directory of the HarmonyOS project in DevEco Studio.
+First, you need to open the HarmonyOS project `harmony` within your project using DevEco Studio.
-### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project
+### 1. Add the overrides field to the root `oh-package.json5` of the project
```json
{
@@ -83,15 +96,20 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio.
}
```
-### 2. Introducing Native Code
+### 2. Import Native Side Code
+
+There are currently two methods:
+
+1. Import via har package (This method will be deprecated after IDE features are improved; currently the preferred method).
+2. Link source code directly.
-Currently, two methods are available:
+Method 1: Import via har package
-Method 1 (recommended): Use the HAR file.
+> [!TIP] The har package is located in the `harmony` folder of the third-party library's 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:
+- V4.7.4
```json
"dependencies": {
@@ -101,24 +119,33 @@ Open `entry/oh-package.json5` file and add the following dependencies:
}
```
-Click the `sync` button in the upper right corner.
+- V5.1.1
-Alternatively, run the following instruction on the terminal:
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+
+ "@react-native-ohos/react-native-safe-area-context": "file:../../node_modules/@react-native-ohos/react-native-safe-area-context/harmony/safe_area.har"
+ }
+```
+
+Click the `sync` button in the top right corner.
+
+Or execute in the terminal:
```bash
cd entry
ohpm install
```
-Method 2: Directly link to the source code.
+Method 2: Link Source Code Directly
-> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md).
+> [!TIP] If you need to link source code directly, please refer to the [Direct Link Source Code Instructions](/en/link-source-code.md)
-### 3. Configuring CMakeLists and Introducing SafeAreaViewPackage
+### 3. Configure CMakeLists and Import SafeAreaViewPackage
-Open `entry/src/main/cpp/CMakeLists.txt ` and add the following code:
+Open `entry/src/main/cpp/CMakeLists.txt` and add:
-```diff
```diff
project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
@@ -137,7 +164,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn)
# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+
+# V4.7.4
+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-safe-area-context/src/main/cpp" ./safe-area)
+
+# V5.1.1
++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-safe-area-context/src/main/cpp" ./safe-area)
+
# RNOH_END: manual_package_linking_1
file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
@@ -155,7 +188,7 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
# RNOH_END: manual_package_linking_2
```
-Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code:
+Open `entry/src/main/cpp/PackageProvider.cpp` and add:
```diff
#include "RNOH/PackageProvider.h"
@@ -174,15 +207,18 @@ std::vector> PackageProvider::getPackages(Package::Cont
}
```
-### 4. Introducing SafeAreaViewPackage to ArkTS
+### 4. Import SafeAreaViewPackage on the ArkTs Side
-Open the`entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
+Open `entry/src/main/ets/RNPackagesFactory.ts` and add:
```diff
...
-
+// V4.7.4
+ import {SafeAreaViewPackage} from '@react-native-oh-tpl/react-native-safe-area-context/ts';
+// V5.1.1
++ import {SafeAreaViewPackage} from '@react-native-ohos/react-native-safe-area-context/ts';
+
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -191,66 +227,69 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
}
```
-### 5. Running
+### 5. Run
-Click the `sync` button in the upper right corner.
+Click the `sync` button in the top right corner.
-Alternatively, run the following instruction on the terminal:
+Or execute in the terminal:
```bash
cd entry
ohpm install
```
-Then build and run the code.
+Then compile and run.
## Compatibility
-To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
+To use this library, you need to use the correct React-Native and RNOH versions. Additionally, you need to use the matching DevEco Studio and phone ROM.
+
+This document is verified based on the following versions:
+1. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+2. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
-Check the release version information in the release address of the third-party library:[@react-native-oh-tpl/react-native-safe-area-context Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases)
-## Properties
+## Props
-> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
+> [!TIP] The "Platform" column indicates the platforms supported by the original third-party library for that prop.
-> [!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] A value of "yes" in the "HarmonyOS Support" column indicates the prop is supported on the HarmonyOS platform; "no" indicates it is not supported; "partially" indicates partial support. The usage method is consistent across platforms, and the effect aligns with that on iOS or Android.
-**SafeAreaProvider**
+**Component SafeAreaProvider**
-You should add `SafeAreaProvider` in your app root component. You may need to add it in other places like the root of modals and routes when using react-native-screens.
+You should add `SafeAreaProvider` in your app root component. You may need to add it in other places like the root of modals and routes when using `react-native-screens`.
-Note that providers should not be inside a View that is animated with Animated or inside a ScrollView since it can cause very frequent updates.
+Note that providers should not be inside a View that is animated with `Animated` or inside a `ScrollView` since it can cause very frequent updates.
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- |
-| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes |
-| `initialMetrics` | Can be used to provide the initial value for frame and insets, this allows rendering immediatly. See optimization for more information on how to use this prop. | object | no | All | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | ----------------- |
+| `Props` | Accepts all View props. Has a default style of `{flex: 1}`. | object | no | All | yes |
+| `initialMetrics` | Can be used to provide the initial value for frame and insets, this allows rendering immediately. See optimization for more information on how to use this prop. | object | no | All | yes |
-**SafeAreaView**
+**Component SafeAreaView**
`SafeAreaView` is a regular View component with the safe area insets applied as padding or margin.
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ------- | ----------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- |
-| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes |
-| `edges` | Sets the edges to apply the safe area insets to. Defaults to all. | array | no | All | yes |
-| `mode` | Optional, padding (default) or margin. Apply the safe area to either the padding or the margin. | string | no | All | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------------------------------------------------------------------ | ------ | -------- | -------- | ----------------- |
+| `Props` | Accepts all View props. Has a default style of `{flex: 1}`. | object | no | All | yes |
+| `edges` | Sets the edges to apply the safe area insets to. Defaults to all. | array | no | All | yes |
+| `mode` | Optional, `padding` (default) or `margin`. Apply the safe area to either the padding or the margin. | string | no | All | yes |
-# API
+## 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 platforms supported by the original third-party library for that API.
-> [!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] A value of "yes" in the "HarmonyOS Support" column indicates the API is supported on the HarmonyOS platform; "no" indicates it is not supported; "partially" indicates partial support. The usage method is consistent across platforms, and the effect aligns with that on iOS or Android.
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- |----------|----------| -------- | ------------------ |
-| useSafeAreaInsets | Returns the safe area insets of the nearest provider. | object | no | All | yes |
-| useSafeAreaFrame | Returns the frame of the nearest provider. This can be used as an alternative to the Dimensions module. | object | no | All | yes |
-| SafeAreaInsetsContext | React Context with the value of the safe area insets. | object | no | All | yes |
-| withSafeAreaInsets | Higher order component that provides safe area insets as the insets prop. | function | no | All | yes |
-| SafeAreaFrameContext | React Context with the value of the safe area frame. | object | no | All | yes |
-| initialWindowMetrics | Insets and frame of the window on initial render. This can be used with the initialMetrics from SafeAreaProvider | object | no | All | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------- | ------------------------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- |
+| `useSafeAreaInsets` | Returns the safe area insets of the nearest provider. | object | no | All | yes |
+| `useSafeAreaFrame` | Returns the frame of the nearest provider. This can be used as an alternative to the Dimensions module. | object | no | All | yes |
+| `SafeAreaInsetsContext` | React Context with the value of the safe area insets. | object | no | All | yes |
+| `withSafeAreaInsets`5.1.1+ | Higher order component that provides safe area insets as the `insets` prop. | function | no | All | yes |
+| `SafeAreaFrameContext` | React Context with the value of the safe area frame. | object | no | All | yes |
+| `initialWindowMetrics` | Insets and frame of the window on initial render. This can be used with the `initialMetrics` from `SafeAreaProvider`. | object | no | All | yes |
## Known Issues
@@ -258,4 +297,4 @@ Note that providers should not be inside a View that is animated with Animated o
## License
-This project is licensed under [The MIT License (MIT)](https://github.com/th3rdwave/react-native-safe-area-context/blob/main/LICENSE).
+This project is based on [The MIT License (MIT)](https://github.com/th3rdwave/react-native-safe-area-context/blob/main/LICENSE). Feel free to enjoy and participate in open source.
\ No newline at end of file
diff --git a/en/react-native-simple-toast.md b/en/react-native-simple-toast.md
index 2539f1f51a000d51c6753bb501325389704856eb..58be3c5075d48350485ae689ac13f0ddcb4dd8e2 100644
--- a/en/react-native-simple-toast.md
+++ b/en/react-native-simple-toast.md
@@ -14,9 +14,16 @@
> [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-simple-toast)
+The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/react-native-simple-toast`. The specific version relationships are as follows:
+
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 3.3.1 | @react-native-oh-tpl/react-native-simple-toast | [Github](https://github.com/react-native-oh-library/react-native-simple-toast) | [Github Releases](https://github.com/react-native-oh-library/react-native-simple-toast/releases) | 0.72 |
+| 3.4.0 | @react-native-ohos/react-native-simple-toast | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-simple-toast) | [GitCode Releases]() | 0.77 |
+
## Installation and Usage
-Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-simple-toast Releases](https://github.com/react-native-oh-library/react-native-simple-toast/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.
+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:
@@ -25,13 +32,21 @@ Go to the project directory and execute the following instruction:
#### **npm**
```bash
+# V3.3.1
npm install @react-native-oh-tpl/react-native-simple-toast
+
+# V3.4.0
+npm install @react-native-ohos/react-native-simple-toast
```
#### **yarn**
```bash
+# V3.3.1
yarn add @react-native-oh-tpl/react-native-simple-toast
+
+# V3.4.0
+yarn add @react-native-ohos/react-native-simple-toast
```
@@ -175,8 +190,9 @@ export default ToastTest;
To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
This document is verified based on the following versions:
-
-1. RNOH：0.72.23; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.19
+1. RNOH:0.72.23; SDK:HarmonyOS NEXT Developer Beta1; IDE:DevEco Studio 5.0.3.200; ROM:3.0.0.19
+2. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+3. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
## API
diff --git a/en/react-native-spinkit.md b/en/react-native-spinkit.md
index 214dc8e0894d375d466cd5e5b9b8f2906fc47cc5..0a5ed01f4daa9c19211ebb02fdf8dbde32d07c67 100644
--- a/en/react-native-spinkit.md
+++ b/en/react-native-spinkit.md
@@ -17,10 +17,16 @@
> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-spinkit)
+The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/react-native-spinkit`. The specific version relationships are as follows:
+
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 1.5.1 | @react-native-oh-tpl/react-native-spinkit | [Github](https://github.com/react-native-oh-library/react-native-spinkit) | [Github Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.72 |
+| 1.6.0 | @react-native-ohos/react-native-spinkit | [Github](https://github.com/react-native-oh-library/react-native-spinkit) | [Github Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.77 |
## Installation and Usage
-Find the matching version information in the release address of a third-party library：[@react-native-oh-tpl/react-native-spinkit Releases](https://github.com/react-native-oh-library/react-native-spinkit/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.
+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:
@@ -30,13 +36,21 @@ Go to the project directory and execute the following instruction:
#### **npm**
```bash
+# 1.5.1
npm install @react-native-oh-tpl/react-native-spinkit
+
+# 1.6.0
+npm install @react-native-ohos/react-native-spinkit
```
#### **yarn**
```bash
+# 1.5.1
yarn add @react-native-oh-tpl/react-native-spinkit
+
+# 1.6.0
+yarn add @react-native-ohos/react-native-spinkit
```
@@ -55,8 +69,8 @@ const SpinKitDemo: React.FC = (): JSX.Element => {
type='9CubeGrid'
color='#e74032'
size={60}
- style={{ backgroundColor: '#fcc424' }}
- isVisible={true}
+ style={{ backgroundColor: '#fcc424' }}
+ isVisible={true}
/>
)
};
@@ -97,12 +111,20 @@ Method 1 (recommended): Use the HAR file.
Open `entry/oh-package.json5` file and add the following dependencies:
+- 1.5.1
```json
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
"@react-native-oh-tpl/react-native-spinkit": "file:../../node_modules/@react-native-oh-tpl/react-native-spinkit/harmony/spinKit.har"
}
```
+- 1.6.0
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+ "@react-native-ohos/react-native-spinkit": "file:../../node_modules/@react-native-ohos/react-native-spinkit/harmony/spinKit.har"
+ }
+```
Click the `sync` button in the upper right corner.
@@ -124,8 +146,12 @@ Find `function buildCustomRNComponent()`, which is usually located in `entry/src
```diff
...
+ // 1.5.1
+ import { SpinKitView } from "@react-native-oh-tpl/react-native-spinkit"
+ // 1.6.0
++ import { SpinKitView } from "@react-native-ohos/react-native-spinkit"
+
@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
...
@@ -157,8 +183,12 @@ Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following co
```diff
...
+ // 1.5.1
+ import { RNSpinKitPackage } from '@react-native-oh-tpl/react-native-spinkit/ts';
+ // 1.6.0
++ import { RNSpinKitPackage } from '@react-native-ohos/react-native-spinkit/ts';
+
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -185,8 +215,9 @@ Then build and run the code.
To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
-
-Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-spinkit Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases)
+This document is verified based on the following versions:
+1. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+2. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
## Properties
@@ -194,7 +225,7 @@ 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.
-**SpinKit**：Loading Animation Rendering Component, Accepts All Parameters [View](https://reactnative.dev/docs/view#props) 的props。
+**SpinKit**:Loading Animation Rendering Component, Accepts All Parameters [View](https://reactnative.dev/docs/view#props) props�?
| props | Description | Type | Required | Platform | HarmonyOS Support |
| ---- | ----------- | ---- | -------- | ---- | ------------ |
@@ -205,7 +236,7 @@ Check the release version information in the release address of the third-party
| type: Wave | Five-bar group loading animation | string | No | All | Yes |
| type: WanderingCubes | Two squares skip loading animation | string | No | All | Yes |
| type: Pulse | A circular diffusion loading animation | string | No | All | Yes |
-| type: ChansingDots | Two Circles Bounce Loading Animation | string | No | All | Yes |
+| type: ChasingDots | Two Circles Bounce Loading Animation | string | No | All | Yes |
| type: ThreeBounce | Three circles display the loading animation in sequence. | string | No | All | Yes |
| type: Circle | Multiple circular circular motion loading animation | string | No | All | Yes |
| type: 9CubeGrid | The nine squares display the loading animation in sequence | string | No | All | Yes |
diff --git a/en/react-native-tab-view.md b/en/react-native-tab-view.md
index 8903cc30957e6152e4c3b0437711e2f6ca7157d5..c1cb1fb16d77e635bed40e28a36fad3288434e45 100644
--- a/en/react-native-tab-view.md
+++ b/en/react-native-tab-view.md
@@ -1,4 +1,4 @@
-> Template version: v0.2.2
+> Template Version: v0.2.2
react-native-tab-view
@@ -12,35 +12,48 @@
-> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-navigation/tree/sig)
+> [!TIP] [Github Address](https://github.com/react-native-oh-library/react-navigation/tree/sig)
-## Installation and Usage
+The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/react-native-tab-view`. The specific version relationships are as follows:
-Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-tab-view Releases](https://github.com/react-native-oh-library/react-navigation/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package.
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 3.5.2 | @react-native-oh-tpl/react-native-tab-view | [Github](https://github.com/react-native-oh-library/react-navigation) | [Github Releases](https://github.com/react-native-oh-library/react-navigation/releases) | 0.72 |
+| 4.0.11 | @react-native-ohos/react-native-tab-view | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-navigation/tree/master/packages/react-native-tab-view) | [GitCode Releases]() | 0.77 |
-Go to the project directory and execute the following instruction:
+## Installation and Usage
+For older versions not published to npm, please refer to the [Installation Guide](/en/tgz-usage.md) to install the tgz package.
+Navigate to your project directory and enter the following commands:
#### **npm**
```bash
+# V3.5.2
npm install @react-native-oh-tpl/react-native-tab-view
+
+# V4.0.11
+npm install @react-native-ohos/react-native-tab-view
```
#### **yarn**
```bash
+# V3.5.2
yarn add @react-native-oh-tpl/react-native-tab-view
+
+# V4.0.11
+yarn add @react-native-ohos/react-native-tab-view
```
-The following code shows the basic use scenario of the repository:
+The following code demonstrates a basic usage scenario of this library:
-> [!WARNING] The name of the imported repository remains unchanged.
+> [!WARNING] The import library name remains unchanged during use.
```js
import React from "react";
@@ -179,99 +192,114 @@ const styles = StyleSheet.create({
## Link
-The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-webview. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
+The HarmonyOS implementation of this library depends on the native code of @react-native-oh-tpl/react-native-pager-view. If this library has already been introduced in the HarmonyOS project, there is no need to introduce it again. You can skip the steps in this chapter and use it directly.
-If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-pager-view](/en/react-native-pager-view.md#link) to add it to your project.
+If not introduced, please refer to the [Link chapter of the @react-native-oh-tpl/react-native-pager-view documentation](/en/react-native-pager-view.md#link) for introduction.
## Tip
-本库依赖react-native-pager-view的能力，react-native-pager-view的能力已从ArkTS切换至CAPI。开启CAPI配置后过渡动画功能才能正常生效。
+This library relies on the capabilities of react-native-pager-view, which has switched from ArkTS to CAPI. The transition animation function can only take effect normally after enabling the CAPI configuration.
-请在entry目录下的src/main/ets/pages/index.ets中的build函数中修改配置
+Please modify the configuration in the build function in entry/src/main/ets/pages/index.ets
```js
RNApp({
rnInstanceConfig: {
...,
- //enableCAPIArchitecture 默认为false 需改成true
+ // enableCAPIArchitecture defaults to false, needs to be changed to true
enableCAPIArchitecture: true
},
...
})
```
-## 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.
-
-Check the release version information in the release address of the third-party library: [ @react-native-oh-tpl/react-native-tab-view Releases](https://github.com/react-native-oh-library/react-navigation/releases/)
-
-## Properties
-
-> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
-
-> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
-
-**TabView**：选项卡组件
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-|-----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|----------|----------|-------------------|
-| navigationState | State for the tab view. | fucntion | yes | all | yes |
-| onIndexChange | Callback which is called on tab change, receives the index of the new tab as argument. The navigation state needs to be updated when it's called, otherwise the change is dropped. | function | yes | all | yes |
-| renderScene | Callback which returns a react element to render as the page for the tab. | function | yes | all | yes |
-| renderTabBar | Callback which returns a custom React Element to use as the tab bar | function | no | all | yes |
-| tabBarPosition | Position of the tab bar in the tab view. | 'top'|'bottom' | no | all | yes |
-| lazy | Function which takes an object with the current route and returns a boolean to indicate whether to lazily render the scenes. | function | no | all | yes |
-| lazyPreloadDistance | When lazy is enabled, you can specify how many adjacent routes should be preloaded with this prop. This value defaults to 0 which means lazy pages are loaded as they come into the viewport. | number | no | all | yes |
-| renderLazyPlaceholder | Callback which returns a custom React Element to render for routes that haven't been rendered yet. Receives an object containing the route as the argument. The lazy prop also needs to be enabled. | string | no | all | yes |
-| keyboardDismissMode | String indicating whether the keyboard gets dismissed in response to a drag gesture. | 'auto'|'on-drag'|'none' | no | all | yes |
-| swipeEnabled | Boolean indicating whether to enable swipe gestures. Swipe gestures are enabled by default. Passing false will disable swipe gestures, but the user can still switch tabs by pressing the tab bar. | boolean | no | all | yes |
-| animationEnabled | Enables animation when changing tab. By default it's true. | boolean | no | all | yes |
-| onSwipeStart | Callback which is called when the swipe gesture starts, i.e. the user touches the screen and moves it. | boolean | no | all | yes |
-| onSwipeEnd | Callback which is called when the swipe gesture ends, i.e. the user lifts their finger from the screen after the swipe gesture. | boolean | no | all | yes |
-| initialLayout | Object containing the initial height and width of the screens. Passing this will improve the initial rendering performance. | object | no | all | yes |
-| overScrollMode | Used to override default value of pager's overScroll mode. Can be auto, always or never (Android only). | 'auto'|'always'|'never' | no | Android | yes |
-| sceneContainerStyle | Style to apply to the view wrapping each screen. You can pass this to override some default styles such as overflow clipping | object | no | all | yes |
-| pagerStyle | Style to apply to the pager view wrapping all the scenes. | object | no | all | yes |
-| style | Style to apply to the tab view container. | object | no | all | yes |
-
-**TabBar**：选项卡标签栏
-
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|----------|----------|-------------------|
-| getLabelText | Function which takes an object with the current route and returns the label text for the tab. Uses route.title by default. | function | no | all | yes |
-| getAccessible | Function which takes an object with the current route and returns a boolean to indicate whether to mark a tab as accessible. Defaults to true. | function | no | all | yes |
-| getAccessibilityLabel | Function which takes an object with the current route and returns a accessibility label for the tab button. Uses route.accessibilityLabel by default if specified, otherwise uses the route title. | function | no | all | yes |
-| renderIcon | Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a icon. | function | no | all | yes |
-| renderLabel | Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a label. | function | no | all | yes |
-| renderTabBarItem | Function which takes a TabBarItemProps object and returns a custom React Element to be used as a tab button. | function | no | all | yes |
-| renderIndicator | Function which takes an object with the current route and returns a custom React Element to be used as a tab indicator. | function | no | all | yes |
-| renderBadge | Function which takes an object with the current route and returns a custom React Element to be used as a badge. | function | no | all | yes |
-| onTabPress | Function to execute on tab press. It receives the scene for the pressed tab, useful for things like scroll to top. | function | no | all | yes |
-| onTabLongPress | Function to execute on tab long press, use for things like showing a menu with more options | function | no | all | yes |
-| activeColor | Custom color for icon and label in the active tab. | string | no | all | yes |
-| inactiveColor | Custom color for icon and label in the inactive tab. | string | no | all | yes |
-| pressColor | Color for material ripple (Android >= 5.0 only). | string | no | Android | no |
-| pressOpacity | Opacity for pressed tab (iOS and Android < 5.0 only). | number | no | all | yes |
-| scrollEnabled | Boolean indicating whether to make the tab bar scrollable. | boolean | no | all | yes |
-| bounces | Boolean indicating whether the tab bar bounces when scrolling. | boolean | no | iOS | no |
-| tabStyle | Style to apply to the individual tab items in the tab bar. | object | no | all | yes |
-| indicatorStyle | Style to apply to the active indicator. | object | no | all | yes |
-| indicatorContainerStyle | Style to apply to the container view for the indicator. | object | no | all | yes |
-| labelStyle | Style to apply to the tab item label. | object | no | all | yes |
-| contentContainerStyle | Style to apply to the inner container for tabs. | object | no | all | yes |
-| style (TabBar) | Style to apply to the tab bar container. | object | no | all | yes |
-| gap | Define a spacing between tabs. | number | no | all | yes |
+To use this library, you need to use the correct React-Native and RNOH versions. Additionally, you need to use the matching DevEco Studio and phone ROM.
+
+Please check the release version information in the release address of the third-party library:
+
+| Third-party Version | Release Information | Supported RN Version |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------- |
+| 3.5.2 | [@react-native-oh-tpl/react-native-tab-view Releases](https://github.com/react-native-oh-library/react-navigation/releases/) | 0.72 |
+| 4.0.11 | [@react-native-ohos/react-native-tab-view Releases](https://gitcode.com/openharmony-sig/rntpc_react-navigation/tree/master/packages/react-native-tab-view) | 0.77 |
+
+This document is verified based on the following versions:
+1. RNOH:0.72.96; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+2. RNOH:0.77.18; SDK:HarmonyOS 5.1.1 Release SDK; IDE:DevEco Studio 5.1.1.840; ROM:6.0.0;
+
+## Props
+
+> [!TIP] The "Platform" column indicates the platforms supported by the original third-party library for that prop.
+
+> [!TIP] A value of "yes" in the "HarmonyOS Support" column indicates the prop is supported on the HarmonyOS platform; "no" indicates it is not supported; "partially" indicates partial support. The usage method is consistent across platforms, and the effect aligns with that on iOS or Android.
+
+**TabView**: Tab view component
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -------- | -------- | ----------------- |
+| navigationState | State for the tab view. | function | yes | all | yes |
+| onIndexChange | Callback which is called on tab change, receives the index of the new tab as argument. The navigation state needs to be updated when it's called, otherwise the change is dropped. | function | yes | all | yes |
+| renderScene | Callback which returns a react element to render as the page for the tab. | function | yes | all | yes |
+| renderTabBar | Callback which returns a custom React Element to use as the tab bar | function | no | all | yes |
+| tabBarPosition | Position of the tab bar in the tab view. | 'top'|'bottom' | no | all | yes |
+| lazy | Function which takes an object with the current route and returns a boolean to indicate whether to lazily render the scenes. | function | no | all | yes |
+| lazyPreloadDistance | When `lazy` is enabled, you can specify how many adjacent routes should be preloaded with this prop. This value defaults to `0` which means lazy pages are loaded as they come into the viewport. | number | no | all | yes |
+| renderLazyPlaceholder | Callback which returns a custom React Element to render for routes that haven't been rendered yet. Receives an object containing the route as the argument. The `lazy` prop also needs to be enabled. | string | no | all | yes |
+| keyboardDismissMode | String indicating whether the keyboard gets dismissed in response to a drag gesture. | 'auto'|'on-drag'|'none' | no | all | yes |
+| swipeEnabled | Boolean indicating whether to enable swipe gestures. Swipe gestures are enabled by default. Passing `false` will disable swipe gestures, but the user can still switch tabs by pressing the tab bar. | boolean | no | all | yes |
+| animationEnabled | Enables animation when changing tab. By default it's true. | boolean | no | all | yes |
+| onSwipeStart | Callback which is called when the swipe gesture starts, i.e. the user touches the screen and moves it. | boolean | no | all | yes |
+| onSwipeEnd | Callback which is called when the swipe gesture ends, i.e. the user lifts their finger from the screen after the swipe gesture. | boolean | no | all | yes |
+| initialLayout | Object containing the initial height and width of the screens. Passing this will improve the initial rendering performance. | object | no | all | yes |
+| overScrollMode | Used to override default value of pager's overScroll mode. Can be `auto`, `always` or `never` (Android only). | 'auto'|'always'|'never' | no | Android | yes |
+| sceneContainerStyledeprecated from 4.0.11 | Style to apply to the view wrapping each screen. You can pass this to override some default styles such as overflow clipping | object | no | all | yes |
+| pagerStyle | Style to apply to the pager view wrapping all the scenes. | object | no | all | yes |
+| style | Style to apply to the tab view container. | object | no | all | yes |
+| options4.0.11+ | - | Record> | no | all | yes |
+| commonOptions4.0.11+ | - | TabDescriptor | no | all | yes |
+| direction4.0.11+ | Writing direction of the layout. | LocaleDirection | no | all | yes |
+
+**TabBar**: Tab bar component
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | -------- | ----------------- |
+| getLabelTextdeprecated from 4.0.11 | Function which takes an object with the current route and returns the label text for the tab. Uses `route.title` by default. | function | no | all | yes |
+| getAccessibledeprecated from 4.0.11 | Function which takes an object with the current route and returns a boolean to indicate whether to mark a tab as `accessible`. Defaults to `true`. | function | no | all | yes |
+| getAccessibilityLabeldeprecated from 4.0.11 | Function which takes an object with the current route and returns a accessibility label for the tab button. Uses `route.accessibilityLabel` by default if specified, otherwise uses the route title. | function | no | all | yes |
+| renderIcondeprecated from 4.0.11 | Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a icon. | function | no | all | yes |
+| renderLabeldeprecated from 4.0.11 | Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a label. | function | no | all | yes |
+| renderTabBarItem | Function which takes a `TabBarItemProps` object and returns a custom React Element to be used as a tab button. | function | no | all | yes |
+| renderIndicator | Function which takes an object with the current route and returns a custom React Element to be used as a tab indicator. | function | no | all | yes |
+| renderBadgedeprecated from 4.0.11 | Function which takes an object with the current route and returns a custom React Element to be used as a badge. | function | no | all | yes |
+| onTabPress | Function to execute on tab press. It receives the scene for the pressed tab, useful for things like scroll to top. | function | no | all | yes |
+| onTabLongPress | Function to execute on tab long press, use for things like showing a menu with more options | function | no | all | yes |
+| activeColor | Custom color for icon and label in the active tab. | string | no | all | yes |
+| inactiveColor | Custom color for icon and label in the inactive tab. | string | no | all | yes |
+| pressColor | Color for material ripple (Android >= 5.0 only). | string | no | Android | no |
+| pressOpacity | Opacity for pressed tab (iOS and Android < 5.0 only). | number | no | all | yes |
+| scrollEnabled | Boolean indicating whether to make the tab bar scrollable. | boolean | no | all | yes |
+| bounces | Boolean indicating whether the tab bar bounces when scrolling. | boolean | no | iOS | no |
+| tabStyle | Style to apply to the individual tab items in the tab bar. | object | no | all | yes |
+| indicatorStyle | Style to apply to the active indicator. | object | no | all | yes |
+| indicatorContainerStyle | Style to apply to the container view for the indicator. | object | no | all | yes |
+| labelStyledeprecated from 4.0.11 | Style to apply to the tab item label. | object | no | all | yes |
+| contentContainerStyle | Style to apply to the inner container for tabs. | object | no | all | yes |
+| style (TabBar) | Style to apply to the tab bar container. | object | no | all | yes |
+| gap | Define a spacing between tabs. | number | no | all | yes |
+| direction4.0.11+ | Writing direction of the layout. | LocaleDirection | no | all | yes |
+| layout4.0.11+ | - | Layout | no | all | yes |
+| options4.0.11+ | - | Record> | no | all | yes |
## Known Issues
-- [x] 已解决： 页面滑动时，有概率卡在中间，无法自动回正[issue#5](https://github.com/react-native-oh-library/react-navigation/issues/5)
-- [ ] TabBar中的bounces属性，不生效，无法实现滚动回弹效果[issue#34](https://github.com/react-native-oh-library/react-navigation/issues/34)
+- [x] Resolved: When swiping pages, there is a probability of getting stuck in the middle and not automatically aligning [issue#5](https://github.com/react-native-oh-library/react-navigation/issues/5)
+- [ ] The bounces property in TabBar does not take effect and cannot achieve the scroll bounce effect [issue#34](https://github.com/react-native-oh-library/react-navigation/issues/34)
## Others
-- TabBar中的pressColor属性，不生效，无法实现按下更改颜色。 pressColor属性，是专门为Android平台设计的，这个属性在PlatformPressable中直接传递，在IOS上，pressColor属性没有直接对应的实现，IOS使用不同的机制来处理触摸反馈。
+- The pressColor property in TabBar does not take effect and cannot change color on press. The pressColor property is specifically designed for the Android platform. This property is passed directly in PlatformPressable. On IOS, the pressColor property has no direct corresponding implementation; IOS uses a different mechanism to handle touch feedback.
## License
-This project is licensed under [The MIT License (MIT)](https://github.com/satya164/react-native-tab-view/blob/main/LICENSE.md).
+This project is based on [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/main/packages/react-native-tab-view/LICENSE). Feel free to enjoy and participate in open source.
\ No newline at end of file
diff --git a/zh-cn/baronha-ting.md b/zh-cn/baronha-ting.md
index bf92399f3970763ddd6111159391aa315146bf29..e64255ad69e0ba3f8d9480385b3c2c9b6ef9e064 100644
--- a/zh-cn/baronha-ting.md
+++ b/zh-cn/baronha-ting.md
@@ -14,10 +14,16 @@
> [!TIP] [Github 地址](https://github.com/react-native-oh-library/ting)
+该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/ting，具体版本所属关系如下：
+
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 1.2.2 | @react-native-oh-tpl/ting | [Github](https://github.com/react-native-oh-library/ting) | [Github Releases](https://github.com/react-native-oh-library/async-storage/releases) | 0.72 |
+| 1.3.0 | @react-native-ohos/ting | [GitCode](https://gitcode.com/openharmony-sig/rntpc_ting) | [GitCode Releases]() | 0.77 |
## 安装与使用
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/ting Releases](https://github.com/react-native-oh-library/ting/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
进入到工程目录并输入以下命令：
@@ -26,13 +32,21 @@
#### **npm**
```bash
+# V1.2.2
npm install @react-native-oh-tpl/ting
+
+# V1.3.0
+npm install @react-native-ohos/ting
```
#### **yarn**
```bash
+# V1.2.2
yarn add @react-native-oh-tpl/ting
+
+# V1.3.0
+yarn add @react-native-ohos/ting
```
@@ -41,8 +55,9 @@ yarn add @react-native-oh-tpl/ting
> [!WARNING] 使用时 import 的库名不变。
+
```js
-import { View } from "react-native";
+import { View, Button } from "react-native";
import {
ToastOptions,
toast
@@ -54,18 +69,19 @@ function handleToast(options: ToastOptions) {
const App = () => {
return (
-
- {
- const options: ToastOptions = {
- title: 'title-Toast',
- message: 'message-Toast',
- };
- handleToast(options);
- }}
- />
+
+ {
+ const options: ToastOptions = {
+ title: 'title-Toast',
+ message: 'message-Toast',
+ };
+ handleToast(options);
+ }}
+ />
+ );
};
export default App;
@@ -105,6 +121,8 @@ export default App;
打开 `entry/oh-package.json5`，添加以下依赖
+- V1.2.2
+
```json
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
@@ -112,6 +130,15 @@ export default App;
}
```
+- V1.3.0
+
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+ "@react-native-ohos/ting": "file:../../node_modules/@react-native-ohos/ting/harmony/ting.har"
+}
+```
+
点击右上角的 `sync` 按钮
或者在终端执行：
@@ -125,14 +152,65 @@ ohpm install
> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md)
-### 3.在 ArkTs 侧引入 RNTingPackage
+### 3. 配置 CMakeLists 和引入 RNTingPackage
+
+> V1.3.0 需要配置 CMakeLists 和引入 RNTingPackage。
+
+```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/Ting/src/main/cpp" ./ting)
+# 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_ting)
+# RNOH_BEGIN: manual_package_linking_2
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
++ #include "TingPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
++ std::make_shared(ctx)
+}
+```
+
+### 4.在 ArkTs 侧引入 RNTingPackage
打开 `entry/src/main/ets/RNPackagesFactory.ets`，添加：
```diff
...
+// V1.2.2
+ import {RNTingPackage} from '@react-native-oh-tpl/ting';
+// V1.3.0
++ import {RNTingPackage} from '@react-native-ohos/ting';
+
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -141,7 +219,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
}
```
-### 4.运行
+### 5.运行
点击右上角的 `sync` 按钮
@@ -160,7 +238,10 @@ ohpm install
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/ting Releases](https://github.com/react-native-oh-library/ting/releases)
+在以下版本验证通过：
+
+1. RNOH：0.72.96; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+2. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
## 属性
@@ -172,37 +253,37 @@ ohpm install
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|----------------------|---------------------------------------------------------|------|----------|----------|---------------------|
-| title | The text for the toast’s title | string | no | All | yes |
-| message | The text for the toast’s message | string | no | All | yes |
-| titleColor | The color of the title text in hexadecimal format | string | no | All | yes |
-| messageColor | The color of the message text in hexadecimal format | string | no | All | yes |
-| preset | The preset style of the toast. Options include done (success), error (error), none (no style), or spinner (loading spinner) | string | no | All | partially |
-| duration | The lifetime of the toast (seconds) | number | no | All | yes |
-| haptic | The type of haptic feedback. Options include success (success), warning (warning), error (error), or none (no haptic feedback) | string | no | iOS | yes |
-| shouldDismissByDrag | Whether the toast can be dismissed by dragging | boolean | no | All | yes |
-| position | Toast is displayed from top or bottom | string | no | All |yes |
-| backgroundColor | The background color of the toast in hexadecimal format| string | no | All |yes |
-| icon | A custom icon for the toast | object | no | All | yes |
-| progressColor | The color of the progress spinner for the spinner preset style | string | no | Android | yes |
+| title | Toast 标题文本 | string | no | All | yes |
+| message | Toast 消息文本 | string | no | All | yes |
+| titleColor | 标题文本颜色（十六进制格式） | string | no | All | yes |
+| messageColor | 消息文本颜色（十六进制格式） | string | no | All | yes |
+| preset | Toast 预设样式。选项包括：done（成功）、error（错误）、none（无样式）、spinner（加载指示器） | string | no | All | partially |
+| duration | Toast 显示时长（秒） | number | no | All | yes |
+| haptic | 触觉反馈类型。选项包括：success（成功）、warning（警告）、error（错误）、none（无触觉反馈） | string | no | iOS | yes |
+| shouldDismissByDrag | 是否可以通过拖拽关闭 Toast | boolean | no | All | yes |
+| position | Toast 显示位置（顶部或底部） | string | no | All |yes |
+| backgroundColor | Toast 背景颜色（十六进制格式）| string | no | All |yes |
+| icon | 自定义图标 | object | no | All | yes |
+| progressColor | spinner 预设样式的进度指示器颜色 | string | no | Android | yes |
### AlertOptions
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| title | The text for the toast’s title | string | no | All | yes |
-| message | The text for the toast’s message | string | no | All | yes |
-| titleColor | The color of the title text in hexadecimal format | string | no | All | yes |
-| messageColor | The color of the message text in hexadecimal format | string | no | All | yes |
-| preset | The preset style of the toast. Options include done (success), error (error), none (no style), or spinner (loading spinner) | string | no | All | partially |
-| duration | The lifetime of the toast (seconds) | number | no | All | yes |
-| haptic | The type of haptic feedback. Options include success (success), warning (warning), error (error), or none (no haptic feedback) | string | no | iOS | yes |
-| shouldDismissByTap | Whether the toast can be dismissed by tapping | boolean | no | All | yes |
-| backgroundColor | The background color of the toast in hexadecimal format| string | no | All |yes |
-| borderRadius | The border radius of the toast box, which determines how rounded the corners are | number | no | All | yes |
-| blurBackdrop | The intensity of the background blur effect on Android platforms | number | no | Android | no |
-| backdropOpacity | The opacity of the background blur effect on Android platforms, with a range from 0 (fully transparent) to 1 (fully opaque) | number | no | All | yes |
-| icon | A custom icon for the toast | object | no | All | yes |
-| progressColor | The color of the progress spinner for the spinner preset style | string | no | Android | yes |
+| title | Alert 标题文本 | string | no | All | yes |
+| message | Alert 消息文本 | string | no | All | yes |
+| titleColor | 标题文本颜色（十六进制格式） | string | no | All | yes |
+| messageColor | 消息文本颜色（十六进制格式） | string | no | All | yes |
+| preset | Alert 预设样式。选项包括：done（成功）、error（错误）、none（无样式）、spinner（加载指示器）| string | no | All | partially |
+| duration | Alert 显示时长（秒） | number | no | All | yes |
+| haptic | 触觉反馈类型。选项包括：success（成功）、warning（警告）、error（错误）、none（无触觉反馈） | string | no | iOS | yes |
+| shouldDismissByTap | 是否可以通过点击关闭 Alert | boolean | no | All | yes |
+| backgroundColor | Alert 背景颜色（十六进制格式）| string | no | All |yes |
+| borderRadius | Alert 边框圆角半径，决定圆角程度 | number | no | All | yes |
+| blurBackdrop | Android 平台上背景模糊效果的强度 | number | no | Android | no |
+| backdropOpacity | 背景模糊效果的不透明度，范围从 0（完全透明）到 1（完全不透明） | number | no | All | yes |
+| icon | 自定义图标 | object | no | All | yes |
+| progressColor | spinner 预设样式的进度指示器颜色 | string | no | Android | yes |
## API
@@ -212,10 +293,10 @@ ohpm install
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| toast | Displays a Toast notification | function | yes | All | yes |
-| alert | Displays an Alert dialog | function | yes | All | yes |
-| dismissAlert | Closes the currently displayed Alert dialog | function | yes | All | yes |
-| setup | Configures global settings for Toast and Alert | function | yes | All | yes |
+| toast | 显示 Toast 通知 | function | yes | All | yes |
+| alert | 显示 Alert 对话框 | function | yes | All | yes |
+| dismissAlert | 关闭当前显示的 Alert 对话框 | function | yes | All | yes |
+| setup | 配置 Toast 和 Alert 的全局设置 | function | yes | All | yes |
## 遗留问题
diff --git a/zh-cn/react-content-loader.md b/zh-cn/react-content-loader.md
index 4ec8b1ae79a3b7774b044427cf03c775f75af34a..e396d3ec9fd4e1398e77e9a3a27ba788770e196f 100644
--- a/zh-cn/react-content-loader.md
+++ b/zh-cn/react-content-loader.md
@@ -14,14 +14,14 @@
> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-content-loader)
-## 安装与使用
+该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`react-content-loader`，具体版本所属关系如下：
-请到三方库的 Releases 发布地址查看配套的版本信息：
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 7.0.2 | @react-native-oh-tpl/react-content-loader | [Github](https://github.com/react-native-oh-library/react-content-loader) | [Github Releases](https://github.com/react-native-oh-library/react-content-loader/releases) | 0.72 |
+| 7.1.0 | @react-native-ohos/react-content-loader | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-content-loader) | [GitCode Releases]() | 0.77 |
-| 三方库版本 | 发布信息 | 支持RN版本 |
-| ---------- | ------------------------------------------------------------ | ---------- |
-| 7.0.2 | [@react-native-oh-tpl/react-content-loader Releases](https://github.com/react-native-oh-library/react-content-loader/releases) | 0.72 |
-| 7.0.3 | [@react-native-ohos/react-content-loader Releases]() | 0.77 |
+## 安装与使用
对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
@@ -36,7 +36,7 @@
# V7.0.2 for RN0.72
npm install @react-native-oh-tpl/react-content-loader
-# V7.0.3 for RN0.77
+# V7.1.0 for RN0.77
npm install @react-native-ohos/react-content-loader
```
@@ -46,7 +46,7 @@ npm install @react-native-ohos/react-content-loader
# V7.0.2 for RN0.72
yarn add @react-native-oh-tpl/react-content-loader
-# V7.0.3 for RN0.77
+# V7.1.0 for RN0.77
yarn add @react-native-ohos/react-content-loader
```
@@ -97,13 +97,10 @@ export function AppExample() {
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：
-
-| 三方库版本 | 发布信息 | 支持RN版本 |
-| ---------- | ------------------------------------------------------------ | ---------- |
-| 7.0.2 | [@react-native-oh-tpl/react-content-loader Releases](https://github.com/react-native-oh-library/react-content-loader/releases) | 0.72 |
-| 7.0.3 | [@react-native-ohos/react-content-loader Releases]() | 0.77 |
+在以下版本验证通过：
+1. RNOH：0.72.96; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+2. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
## 属性
@@ -115,20 +112,20 @@ export function AppExample() {
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| animate | Opt-out of animations with false | boolean | no | all | yes |
-| speed | Animation speed in seconds | number | no | all | yes |
-| rtl | Content right-to-left | boolean | no | all | yes |
-| backgroundColor | Used as background of animation | string | no | all | yes |
-| viewBox | Use viewBox props to set a custom viewBox value,for more information about how to use it,read the article [How to Scale SVG](https://css-tricks.com/scale-svg/) | string | no | all | yes |
-| foregroundColor | Used as the foreground of animation | string | no | all | yes |
-| interval | Animation interval in seconds | number | no | all | yes |
-| beforeMask | Define custom shapes before content | JSX.Element | no | all | partially |
-| uniqueKey | Use the same value of prop key, that will solve inconsistency on the SSR | string | no | React DOM only | no |
-| title | It's used to describe what element it is. Use '' (empty string) to remove. | string | no | React DOM only | no |
-| baseUrl | Required if you're using ` `. This prop is common used as: ` 中使用 = [
```diff
...
+ // 0.6.0
+ import {ChartsWrapperPackage} from '@react-native-oh-tpl/react-native-charts-wrapper/ts';
+ // 0.7.0
++ import {ChartsWrapperPackage} from '@react-native-ohos/react-native-charts-wrapper/ts';
+
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -259,7 +299,10 @@ ohpm install
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-charts-wrapper/Releases](https://github.com/react-native-oh-library/react-native-charts-wrapper/releases)
+在以下版本验证通过：
+
+1. RNOH：0.72.96; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+2. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
## 属性
diff --git a/zh-cn/react-native-file-selector.md b/zh-cn/react-native-file-selector.md
index fdabdd0095f4d7f3a0a0c6b805286fecaf0d6e9a..a3923e847efedf20077ec18d5743f4d46c453983 100644
--- a/zh-cn/react-native-file-selector.md
+++ b/zh-cn/react-native-file-selector.md
@@ -15,9 +15,16 @@
> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-file-selector)
+该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-file-selector`，具体版本所属关系如下：
+
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 1.0.2 | @react-native-oh-tpl/react-native-file-selector | [Github](https://github.com/react-native-oh-library/react-native-file-selector) | [Github Releases](https://github.com/react-native-oh-library/react-native-file-selector/releases) | 0.72 |
+|1.1.0 | @react-native-ohos/react-native-file-selector | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-file-selector) | [GitCode Releases]() | 0.77 |
+
## 安装与使用
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-file-selector Releases](https://github.com/react-native-oh-library/react-native-file-selector/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
进入到工程目录并输入以下命令：
@@ -25,13 +32,19 @@
#### **npm**
```bash
+# 1.0.2
npm install @react-native-oh-tpl/react-native-file-selector
+# 1.1.0
+npm install @react-native-ohos/react-native-file-selector
```
#### **yarn**
```bash
+# 1.0.2
yarn add @react-native-oh-tpl/react-native-file-selector
+# 1.1.0
+yarn add @react-native-ohos/react-native-file-selector
```
@@ -55,6 +68,8 @@ export default App;
## 使用 Codegen
+> [!TIP] V1.1.0 不需要执行 Codegen。
+
本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。
## Link
@@ -86,7 +101,7 @@ export default App;
> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
打开 `entry/oh-package.json5`，添加以下依赖
-
+- V1.0.2
```json
"dependencies": {
"@rnoh/react-native-openharmony" : "file:../react_native_openharmony",
@@ -94,6 +109,14 @@ export default App;
}
```
+- V1.1.0
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony" : "file:../react_native_openharmony",
+ "@react-native-ohos/react-native-file-selector": "file:../../node_modules/@react-native-ohos/react-native-file-selector/harmony/file_selector.har"
+ }
+```
+
点击右上角的 `sync` 按钮
或者在终端执行：
@@ -115,7 +138,10 @@ ohpm install
```diff
...
import type {RNPackageContext, RNPackage} from '@rnoh/react-native-openharmony/ts';
+// V1.0.2
+import {RNFileSelectorPackage} from '@react-native-oh-tpl/react-native-file-selector/ts';
+// V1.1.0
++import {RNFileSelectorPackage} from '@react-native-ohos/react-native-file-selector/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
@@ -125,7 +151,70 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
}
```
-### 4.运行
+### 4.配置 CMakeLists 和引入 SqliteStoragePackage
+
+> [!TIP] V1.1.0 需要执行
+
+打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
+
+```diff
+project(rnapp)
+cmake_minimum_required(VERSION 3.4.1)
+set(CMAKE_SKIP_BUILD_RPATH TRUE)
+set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
+set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
+set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
+set(LOG_VERBOSITY_LEVEL 1)
+set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
+set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
+set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
+add_compile_definitions(WITH_HITRACE_SYSTRACE)
+
+add_subdirectory("${RNOH_CPP_DIR}" ./rn)
+
+# RNOH_BEGIN: manual_package_linking_1
+add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-file-selector/src/main/cpp" ./file-selector)
+
+
+# RNOH_END: manual_package_linking_1
+
+file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
+
+add_library(rnoh_app SHARED
+ ${GENERATED_CPP_FILES}
+ "./PackageProvider.cpp"
+ "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
+)
+target_link_libraries(rnoh_app PUBLIC rnoh)
+
+# RNOH_BEGIN: manual_package_linking_2
+target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
++ target_link_libraries(rnoh_app PUBLIC rnoh_file_selector)
+# RNOH_END: manual_package_linking_2
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "generated/RNOHGeneratedPackage.h"
+#include "SamplePackage.h"
++ #include "FileSelectorPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
+ std::make_shared(ctx),
++ std::make_shared(ctx),
+ };
+}
+```
+
+### 5.运行
点击右上角的 `sync` 按钮
@@ -144,7 +233,10 @@ ohpm install
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-file-selector Releases](https://github.com/react-native-oh-library/react-native-file-selector/releases)
+在以下版本验证通过：
+
+1. RNOH：0.72.96; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+2. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
## 属性
diff --git a/zh-cn/react-native-popover-view.md b/zh-cn/react-native-popover-view.md
index 51271ca4348d9eac356a4518d88e262180b7e131..a97652a44996fce3c40f2e18d4e1177d5e64caef 100644
--- a/zh-cn/react-native-popover-view.md
+++ b/zh-cn/react-native-popover-view.md
@@ -15,14 +15,13 @@
> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-popover-view)
-## 安装与使用
-
-请到三方库的 Releases 发布地址查看配套的版本信息：
+该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-popover-view`，具体版本所属关系如下：
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 5.1.7 | @react-native-oh-tpl/react-native-popover-view | [Github](https://github.com/react-native-oh-library/react-native-popover-view) | [Github Releases](https://github.com/react-native-oh-library/react-native-popover-view/releases) | 0.72 |
+| 6.1.1 | @react-native-ohos/react-native-popover-view | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-popover-view) | [GitCode Releases]() | 0.77 |
-| 三方库版本 | 发布信息 | 支持RN版本 |
-| ---------- | ------------------------------------------------------------ | ---------- |
-| 5.1.7 | [<@react-native-oh-tpl/react-native-popover-view> Releases](https://github.com/react-native-oh-library/react-native-popover-view/releases) | 0.72 |
-| 6.1.0 | [<@react-native-ohos/react-native-popover-view> Releases]() | 0.77 |
+## 安装与使用
对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
@@ -35,7 +34,8 @@
```bash
# V5.1.7
npm install @react-native-oh-tpl/react-native-popover-view
-# V6.1.0
+
+# V6.1.1
npm install @react-native-ohos/react-native-popover-view
```
@@ -44,7 +44,8 @@ npm install @react-native-ohos/react-native-popover-view
```bash
# V5.1.7
yarn add @react-native-oh-tpl/react-native-popover-view
-# V6.1.0
+
+# V6.1.1
yarn add @react-native-ohos/react-native-popover-view
```
@@ -151,13 +152,16 @@ export default PopoverDemo;
## 约束与限制
-#### 兼容性
+### 兼容性
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
在下述版本验证通过：
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.96; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+3. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
-## 属性&方法
+### 属性&方法
> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
@@ -165,28 +169,28 @@ export default PopoverDemo;
| Name | Description | Type | Required | Platform | HarmonyOS Support | remark |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | -------- | -------- | ----------------- | -------------- |
-| from | Popover source. See From section below. | multiple | no | All | yes |
-| isVisible | Show/Hide the popover. Required if from is not a Touchable or function that uses showPopover call (see examples). If supplied, takes precedence regardless of from. | bool | no | All | yes |
-| placement | How to position the popover, one of 'top', 'bottom', 'left', 'right', 'floating', or 'auto'. When 'auto' is specified, it will try to determine the best placement so that the popover is fully visible within displayArea. If an array of options is passed in, it will pick the first option that can accommodate the content. | string OR string list | no | All | yes |
-| mode | One of: 'rn-modal', 'js-modal', 'tooltip'. See Mode section below for details. | string | no | All | yes |
-| offset | The amount to shift the popover away from the source. Does not apply if the popover is centered. | number | no | All | yes |
-| popoverStyle | The style of the popover itself. You can override the borderRadius, backgroundColor, or any other style prop for a View. | object | no | All | yes |
-| popoverShift | How much to shift the popover in each direction, as a multiplier. Object of shape { x: -1 to 1, y: -1 to 1 }, where both x and y are optional. -1 shifts the popover all the way to the left/top and 1 shifts it to the right/bottom. Currently only applies when placement is floating, but this will apply to all placements in a future version. | object | no | All | yes |
-| backgroundStyle | The style of the background view. Default is a black background with 0.5 opacity. | object | no | All | yes |
-| arrowSize | The size of the arrow, as an object with width & height properties. The width of the arrow is the size of the arrow on the edge that touches the popover (base of isosceles triangle), while the height covers the distance from the popover to the source view, regardless of the placement of the popover. You can use { width: 0, height: 0 } to hide the arrow completely. | object | no | All | yes |
-| arrowShift | How much to shift the arrow to either side, as a multiplier. -1 will shift it all the way to the left (or top) corner of the source view, while 1 will shift all the way to the right (or bottom) corner. A value of 0.5 or -0.8 will shift it partly to one side. | object | no | All | yes |
-| onOpenStart | Callback to be fired when the open animation starts (before animation) | function | no | All | yes |
-| onOpenComplete | Callback to be fired when the open animation ends (after animation) | function | no | All | yes |
-| onRequestClose | Callback to be fired when the user taps outside the popover (on the background) or taps the system back button on Android | function | no | All | yes |
-| onCloseStart | Callback to be fired when the popover starts closing (before animation) | function | no | All | yes |
-| onCloseComplete | Callback to be fired when the popover is finished closing (after animation) | function | no | All | yes |
-| onPositionChange | Callback to be fired when the popover position finishes moving position (after animation) | function | no | All | yes |
-| animationConfig | An object containing any configuration options that can be passed to Animated.timing (e.g. { duration: 600, easing: Easing.inOut(Easing.quad) }). The configuration options you pass will override the defaults for all animations. | object | no | All | yes |
-| displayArea | Area where the popover is allowed to be displayed. By default, this will be automatically calculated to be the size of the display, or the size of the parent component if mode is not 'rn-modal'. | rect | no | All | yes |
-| displayAreaInsets | Insets to apply to the display area. The Popover will not be allowed to go beyond the display area minus the insets. | object | no | All | yes |
-| statusBarTranslucent | For 'rn-modal' mode on Android only. Determines whether the background should go under the status bar. Passed through to RN Modal component, see their docs as well. | bool | no | Android | no | 原库仅支持安卓 |
-| verticalOffsetdeprecated from 6.1.0 | The amount to vertically shift the popover on the screen, for use in correcting an occasional issue on Android. In certain Android configurations, you may need to apply a verticalOffset of -StatusBar.currentHeight for the popover to originate from the correct place. For shifting the popover in other situations, the offset prop should be used. | number | no | Android | no | 原库仅支持安卓 |
-| debug | Set this to true to turn on debug logging to the console. This is useful for figuring out why a Popover isn't showing. | bool | no | All | yes ||
+| from | 弹出层锚点源。详见下方 From 章节。 | multiple | no | All | yes |
+| isVisible | 显示/隐藏弹出层。如果 `from` 不是可触摸组件或使用 `showPopover` 调用的函数，则必需。如果提供了此参数，无论 `from` 如何设置，都将优先使用此参数。 | bool | no | All | yes |
+| placement | 弹出层定位方式，可选值为 'top'、'bottom'、'left'、'right'、'floating' 或 'auto'。指定为 'auto' 时，会自动尝试确定最佳位置以确保弹出层在 `displayArea` 内完全可见。如果传入选项数组，则会选择第一个能容纳内容的选项。 | string OR string list | no | All | yes |
+| mode | 模式，可选值为：'rn-modal'、'js-modal'、'tooltip'。详见下方 Mode 章节。 | string | no | All | yes |
+| offset | 弹出层偏离锚点源的距离。如果弹出层是居中的则不适用。 | number | no | All | yes |
+| popoverStyle | 弹出层自身的样式。可以覆盖圆角、背景色或任何 View 支持的样式属性。 | object | no | All | yes |
+| popoverShift | 在各个方向上平移弹出层的量，作为乘数。格式为 { x: -1 到 1, y: -1 到 1 } 的对象，x 和 y 均为可选。值为 -1 将弹出层完全向左/上平移，值为 1 则向右/下平移。当前仅当 `placement` 为 'floating' 时适用，但在未来版本中将适用于所有定位方式。 | object | no | All | yes |
+| backgroundStyle | 背景视图的样式。默认为黑色背景，透明度 0.5。 | object | no | All | yes |
+| arrowSize | 箭头尺寸，是一个包含 width 和 height 属性的对象。箭头的 width 是指箭头接触弹出层边缘的尺寸（等腰三角形的底边），而 height 则覆盖从弹出层到锚点源视图的距离，与弹出层的位置无关。可以使用 { width: 0, height: 0 } 来完全隐藏箭头。 | object | no | All | yes |
+| arrowShift | 箭头向一侧平移的量，作为乘数。值为 -1 将箭头完全平移至锚点源视图的左（或上）角，值为 1 则完全平移至右（或下）角。值为 0.5 或 -0.8 会使其部分偏向一侧。 | object | no | All | yes |
+| onOpenStart | 打开动画开始时触发的回调函数（动画开始前） | function | no | All | yes |
+| onOpenComplete | 打开动画结束时触发的回调函数（动画结束后） | function | no | All | yes |
+| onRequestClose | 当用户点击弹出层外部（背景）或点击 Android 系统返回按钮时触发的回调函数 | function | no | All | yes |
+| onCloseStart | 弹出层开始关闭时触发的回调函数（动画开始前） | function | no | All | yes |
+| onCloseComplete | 弹出层完全关闭后触发的回调函数（动画结束后） | function | no | All | yes |
+| onPositionChange | 弹出层位置移动完成后触发的回调函数（动画结束后） | function | no | All | yes |
+| animationConfig | 包含可传递给 Animated.timing 的任何配置选项的对象（例如 { duration: 600, easing: Easing.inOut(Easing.quad) }）。传入的配置选项将覆盖所有动画的默认值。 | object | no | All | yes |
+| displayArea | 允许显示弹出层的区域。默认情况下，会自动计算为显示区域的大小，如果模式不是 'rn-modal'，则为父组件的大小。 | rect | no | All | yes |
+| displayAreaInsets | 应用于显示区域的内边距。弹出层不允许超出显示区域减去内边距的范围。 | object | no | All | yes |
+| statusBarTranslucent | 仅适用于 Android 上的 'rn-modal' 模式。决定背景是否应延伸到状态栏下方。此属性会传递给 RN Modal 组件，具体可参考其文档。 | bool | no | Android | no | 原库仅支持安卓 |
+| verticalOffsetdeprecated from 6.1.1 | 在屏幕上垂直移动弹出层的量，用于修正 Android 上偶尔出现的问题。在某些 Android 配置中，可能需要设置 verticalOffset 为 -StatusBar.currentHeight 以使弹出层从正确的位置开始显示。对于其他情况下的弹出层移动，应使用 offset 属性。 | number | no | Android | no | 原库仅支持安卓 |
+| debug | 设置为 true 可在控制台开启调试日志输出。这对于排查弹出层不显示的原因非常有用。 | bool | no | All | yes |
## 遗留问题
diff --git a/zh-cn/react-native-qrcode-svg.md b/zh-cn/react-native-qrcode-svg.md
index 93e51b6073040d0ee92092934aadd27743fe7ec2..2e13d3d0b74e783e85321e7ebfcd29c63b9ccf3f 100644
--- a/zh-cn/react-native-qrcode-svg.md
+++ b/zh-cn/react-native-qrcode-svg.md
@@ -14,24 +14,36 @@
> [!TIP] [Github 地址](https://github.com/awesomejerry/react-native-qrcode-svg)
-## 安装与使用
+| Version | Supported RN Version |
+| ----- | -------------------- |
+| 6.2.0 | 0.72 |
+| 6.3.20 | 0.77 |
-进入到工程目录并输入以下命令：
+## 安装与使用
+进入到工程目录并输入以下命令：
#### **npm**
```bash
+# V6.2.0
npm install react-native-qrcode-svg@6.2.0
+
+# V6.3.20
+npm install react-native-qrcode-svg@6.3.20
```
#### **yarn**
```bash
+# V6.2.0
yarn add react-native-qrcode-svg@6.2.0
+
+# V6.3.20
+yarn add react-native-qrcode-svg@6.3.20
```
@@ -51,8 +63,7 @@ export const SvgDemo = () => {
)
@@ -69,9 +80,13 @@ export const SvgDemo = () => {
### 兼容性
-在以下版本验证通过
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
-1.RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25;
+在下述版本验证通过：
+
+1. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25;
+2. RNOH：0.72.96; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+3. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
## 属性
@@ -81,22 +96,25 @@ export const SvgDemo = () => {
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
-| `size` | Size of rendered image in pixels | number | No | iOS,Android | yes |
-| `value` | String Value of the QR code | string | yes | iOS,Android | yes |
-| `color` | Color of the QR code | string | No | iOS,Android | yes |
-| `backgroundColor` | Color of the background | string | No | iOS,Android | yes |
-| `enableLinearGradient` | enables or disables linear gradient | boolean | No | iOS,Android | yes |
-| `linearGradient` | array of 2 rgb colors used to create the linear gradient | string[] | No | iOS,Android | yes |
-| `gradientDirection` | the direction of the linear gradient | string | No | iOS,Android | yes |
-| `logo` | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')} | object | No | iOS,Android | yes |
-| `logoSize` | Size of the imprinted logo. Bigger logo = less error correction in QR code | number | No | iOS,Android | yes |
-| `logoBackgroundColor` | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop. | string | No | iOS,Android | yes |
-| `logoMargin` | logo's distance to its wrapper | number | No | iOS,Android | yes |
-| `logoBorderRadius` | the border-radius of logo image (Android is not supported) | number | No | iOS | yes |
-| `quietZone` | quiet zone around the qr in pixels (useful when saving image to gallery) | number | No | iOS,Android | yes |
-| `getRef` | Get SVG ref for further usage | callback | No | iOS,Android | yes |
-| `ecl` | Error correction level | string | No | iOS,Android | yes |
-| `onError(error)` | Callback fired when exception happened during the code generating process | callback | No | iOS,Android | yes |
+| `size` | 渲染图像的尺寸，以像素为单位 | number | No | iOS,Android | yes |
+| `value` | 二维码的字符串值 | string | yes | iOS,Android | yes |
+| `color` | 二维码的颜色 | string | No | iOS,Android | yes |
+| `backgroundColor` | 背景颜色 | string | No | iOS,Android | yes |
+| `enableLinearGradient` | 启用或禁用线性渐变 | boolean | No | iOS,Android | yes |
+| `linearGradient` | 用于创建线性渐变的2个RGB颜色数组 | string[] | No | iOS,Android | yes |
+| `gradientDirection` | 线性渐变的方向 | string | No | iOS,Android | yes |
+| `logo` | 图像源对象。例如：{uri: 'base64string'} 或 {require('pathToImage')} | V6.2.0 : `ImageSourcePropType` 6.3.20+ | 作为logo渲染的SVG。可以是svg字符串，也可以是React组件（如果您使用'@svgr/webpack'或类似工具）。如果同时提供了此prop和`logo`，则此prop优先，`logo`将被忽略 | React.FC \| string | No | All | yes |
+| `logoColor`6.3.20+ | 如果通过`logoSVG` prop提供logo，此颜色将设置为其`fill`属性，否则无效 | string | No | All | yes |
+| `testID`6.3.20+ | 用于测试的testID | string | No | All | yes |
## 遗留问题
@@ -105,3 +123,4 @@ export const SvgDemo = () => {
## 开源协议
本项目基于 [The MIT License (MIT)](https://github.com/awesomejerry/react-native-qrcode-svg/blob/master/LICENSE) ，请自由地享受和参与开源。
+
diff --git a/zh-cn/react-native-quick-base64.md b/zh-cn/react-native-quick-base64.md
index de3259bc45df3bdebb653ec91e309f1716248021..eceeb4106557f99d0a0625d64fd2f904a266c2fb 100644
--- a/zh-cn/react-native-quick-base64.md
+++ b/zh-cn/react-native-quick-base64.md
@@ -14,9 +14,16 @@
> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-quick-base64)
+该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-quick-base64`，具体版本所属关系如下：
+
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 2.1.2 | @react-native-oh-tpl/react-native-quick-base64 | [Github](https://github.com/react-native-oh-library/react-native-quick-base64) | [Github Releases](https://github.com/react-native-oh-library/react-native-quick-base64/releases) | 0.72 |
+| 2.2.0 | @react-native-ohos/react-native-quick-base64 | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-quick-base64) | [GitCode Releases]() | 0.77 |
+
## 安装与使用
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-quick-base64 Releases](https://github.com/react-native-oh-library/react-native-quick-base64/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
进入到工程目录并输入以下命令：
@@ -25,13 +32,21 @@
#### **npm**
```bash
+# 2.1.2
npm install @react-native-oh-tpl/react-native-quick-base64
+
+# 2.2.0
+npm install @react-native-ohos/react-native-quick-base64
```
#### **yarn**
```bash
+# 2.1.2
yarn add @react-native-oh-tpl/react-native-quick-base64
+
+# 2.2.0
+yarn add @react-native-ohos/react-native-quick-base64
```
@@ -43,8 +58,12 @@ yarn add @react-native-oh-tpl/react-native-quick-base64
```js
import React, { useState } from 'react';
import { Text, View, TextInput, ScrollView, StyleSheet, Button } from 'react-native';
+
+// 2.1.2
import { byteLength, btoa, atob, toByteArray, fromByteArray, getNative, trimBase64Padding, shim } from '@react-native-oh-tpl/react-native-quick-base64';
+// 2.2.0
+import { byteLength, btoa, atob, toByteArray, fromByteArray, getNative, trimBase64Padding, shim } from '@react-native-ohos/react-native-quick-base64';
type FuncBase64ToArrayBuffer = (
data: string,
removeLinebreaks?: boolean
@@ -66,7 +85,7 @@ const PALETTE = {
};
export function QuickBase64Test() {
- // 测试字符串转base64
+ // Test string to base64 conversion
const [textTobase64, onChangeTextToBase64] = useState('');
const [base64ToTextLength, onChangeBase64TextLength] = useState(0);
@@ -81,9 +100,9 @@ export function QuickBase64Test() {
const [fbArrayBase64StrUrlSafe, onChangeFbArrayBase64StrUrlSafe] = useState('');
- const [testShimBtoA, onChangeTestShimBtoA] = useState(''); // 字符串转base64
+ const [testShimBtoA, onChangeTestShimBtoA] = useState(''); // String to base64
- const [testShimAtoB, onChangeTestShimAtoB] = useState(''); // base64转字符串
+ const [testShimAtoB, onChangeTestShimAtoB] = useState(''); // Base64 to string
const [nativeModule, onChangeNativeModule] = useState({
base64FromArrayBuffer: undefined,
@@ -101,43 +120,43 @@ export function QuickBase64Test() {
const [trimBase64PaddingText, onChangeTrimBase64PaddingText] = useState('');
const byArray = new Uint8Array([72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100, 33]);
- // 点击事件 字符串转base64
+ // Click event: string to base64
const onPressBtoA = (text: string) => {
let b64 = btoa(text);
- console.log(`字符串转base64 ${b64}`);
+ console.log(`String to base64 ${b64}`);
onChangeTextToBase64(b64)
}
const [testText, onChangeTestText] = React.useState('');
- // 点击事件 base64转字符串
+ // Click event: base64 to string
const onPressAtoB = (text: string) => {
let textA = atob(text);
- console.log(`base64转字符串 ${textA}`);
+ console.log(`Base64 to string ${textA}`);
onChangeBase64Text(textA)
}
- // 打印base64转为Unit8Array字节数组的长度
+ // Print the length of base64 converted to Unit8Array byte array
const onPressBase64Length = (text: string) => {
- console.log(`打印base64长度1 ${text}`);
+ console.log(`Print base64 length ${text}`);
onChangeBase64TextLength(byteLength(text))
}
- /* toByteArray 把base64字符串解码为Uint8Array */
+ /* toByteArray: Decodes base64 string to Uint8Array */
const onPressToByteArray = (text: string) => {
let btArray = toByteArray(text);
console.log(`toByteArray ${btArray}`);
onChangeByteArray(btArray)
}
- /* toByteArray 把base64字符串解码为Uint8Array removeLinebreaks */
+ /* toByteArray: Decodes base64 string to Uint8Array with removeLinebreaks */
const onPressToByteArrayRemove = (text: string, removeLinebreaks: boolean = false) => {
let btArray = toByteArray(text, removeLinebreaks);
console.log(`toByteArray ${btArray}`);
onChangeByteArrayRemove(btArray)
}
- /* fromByteArray 把Uint8Array编码为Base64字符串 */
+ /* fromByteArray: Encodes Uint8Array to Base64 string */
const onPressFromByteArray = (
uint8: Uint8Array,
urlSafe: boolean = false) => {
@@ -146,7 +165,7 @@ export function QuickBase64Test() {
onChangeFbArrayBase64Str(b64)
}
- /* fromByteArray 把Uint8Array编码为Base64字符串 */
+ /* fromByteArray: Encodes Uint8Array to Base64 string with URL safe option */
const onPressFromByteArrayUrlSafe = (
uint8: Uint8Array,
urlSafe: boolean = false) => {
@@ -155,11 +174,11 @@ export function QuickBase64Test() {
onChangeFbArrayBase64StrUrlSafe(b64)
}
- /* shim 给全局对象添加btoa和atob函数的shim实现 */
+ /* shim: Add btoa and atob function shim implementations to global object */
const handleAddShimToGlobal = () => {
shim();
- console.log(typeof global.btoa); // 应该输出 "function"
- console.log(typeof global.atob); // 同样应该输出 "function"
+ console.log(typeof global.btoa); // Should output "function"
+ console.log(typeof global.atob); // Should also output "function"
}
const onPressTestShimBtoA = (text: string) => {
@@ -174,14 +193,14 @@ export function QuickBase64Test() {
onChangeTestShimAtoB(decodeBase64)
}
- /* trimBase64Padding 清除Base64字符串的填充字符 */
+ /* trimBase64Padding: Remove padding characters from Base64 string */
const onPressTrimBase64Padding = (text: string) => {
let trimBase64 = trimBase64Padding(text);
- console.log(`shim global atob ${trimBase64}`);
+ console.log(`trimBase64Padding ${trimBase64}`);
onChangeTrimBase64PaddingText(trimBase64)
}
- /* getNative 返回包含base64FromArrayBuffer和base64ToArrayBuffer函数的对象 */
+ /* getNative: Returns object containing base64FromArrayBuffer and base64ToArrayBuffer functions */
const onPressGetNative = () => {
const native = getNative() as NativeModule;
onChangeNativeModule(native)
@@ -189,9 +208,9 @@ export function QuickBase64Test() {
/**
* @param text
- * base64FromArrayBuffer方法接受一个Base64编码的字符串或ArrayBuffer，
- * 以及一个可选的布尔值参数，该参数决定是否生成的Base64字符串是URL安全的。
- * 这个方法将ArrayBuffer对象转换为Base64编码的字符串。
+ * base64FromArrayBuffer method accepts a Base64 encoded string or ArrayBuffer,
+ * and an optional boolean parameter that determines whether the generated Base64 string is URL-safe.
+ * This method converts ArrayBuffer object to Base64 encoded string.
*/
const onPressNBFAB = (text: string | ArrayBuffer) => {
if (nativeModule?.base64FromArrayBuffer) {
@@ -201,7 +220,7 @@ export function QuickBase64Test() {
}
/**
- * @description base64转换Unit8Array 去除换行符
+ * @description Convert base64 to Unit8Array, remove line breaks
* @param text
* @param removeLinebreaks true
*
@@ -214,11 +233,11 @@ export function QuickBase64Test() {
}
/**
- * @description base64转换Unit8Array
- * base64ToArrayBuffer方法接受一个Base64编码的字符串和一个可选的布尔值参数，
- * 该参数决定是否在转换过程中删除换行符。这个方法将Base64编码的字符串转换为ArrayBuffer对象。
+ * @description Convert base64 to Unit8Array
+ * base64ToArrayBuffer method accepts a Base64 encoded string and an optional boolean parameter,
+ * which determines whether to remove line breaks during conversion. This method converts Base64 encoded string to ArrayBuffer object.
* @param text
- * @param removeLinebreaks 默认值 false
+ * @param removeLinebreaks default value false
*
*/
const onPressNBTAB = (text: string) => {
@@ -229,7 +248,7 @@ export function QuickBase64Test() {
}
/**
- * @description base64转换Unit8Array 去除换行符
+ * @description Convert base64 to Unit8Array, remove line breaks
* @param text
* @param removeLinebreaks true
*
@@ -284,8 +303,6 @@ export function QuickBase64Test() {
{(byteArray.toString())}
-
-
Decodes a base64 string into a Uint8Array. Whether to cancel line breaks.
test base64 transform Unit8Array add removeLinebreaks is true, testing the text: {textTobase64}
@@ -296,9 +313,7 @@ export function QuickBase64Test() {
{(byteArrayRemove.toString())}
-
-
- Takes a base64 string and returns the length of the byte array."
+ Takes a base64 string and returns the length of the byte array.
get Unit8Array length form base64 transform, testing the text: {textTobase64}
{(base64ToTextLength)}
-
-
Encodes a Uint8Array into a Base64 character string.
test Uint8Array transform base64 string, testing the text: {byteArray.toString()}
@@ -336,8 +349,7 @@ export function QuickBase64Test() {
handleAddShimToGlobal()} />
-
- {/* 测试shim 设置 btoa和atob函数 成功与否 */}
+ {/* Test whether shim sets btoa and atob functions successfully */}
Test whether the shim sets the btoa function successfully.
@@ -346,8 +358,7 @@ export function QuickBase64Test() {
{testShimBtoA}
-
- {/* 测试shim 设置 btoa和atob函数 成功与否 */}
+ {/* Test whether shim sets btoa and atob functions successfully */}
Test whether the shim sets the atob function successfully.
@@ -356,8 +367,7 @@ export function QuickBase64Test() {
{testShimAtoB}
-
- {/* trimBase64Padding 清除Base64字符串的填充字符 */}
+ {/* trimBase64Padding: Remove padding characters from Base64 string */}
trimBase64Padding.
@@ -371,7 +381,6 @@ export function QuickBase64Test() {
{ onPressGetNative() }} />
-
Click the button below to get base64FromArrayBuffer transform text.
base64 transform string text: {testText}
@@ -379,7 +388,7 @@ export function QuickBase64Test() {
{nativeBFABText}
- Click the button below to get base64FromArrayBuffer transform text, The urlSafe parameter determines whether Base64 encoding uses the URL-safe variant."
+ Click the button below to get base64FromArrayBuffer transform text, The urlSafe parameter determines whether Base64 encoding uses the URL-safe variant.
ArrayBuffer transform string text: {[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]}
{ onPressNBFABUrlSafe(new Uint8Array([72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]).buffer) }} />
@@ -405,7 +414,6 @@ export function QuickBase64Test() {
);
}
-
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
@@ -449,6 +457,7 @@ const styles = StyleSheet.create({
打开 `entry/oh-package.json5`，添加以下依赖
+- 2.1.2
```json
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
@@ -457,6 +466,15 @@ const styles = StyleSheet.create({
}
```
+- 2.2.0
+```json
+ "dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+
+ "@react-native-ohos/react-native-quick-base64": "file:../../node_modules/@react-native-ohos/react-native-quick-base64/harmony/rn_quick_base64.har"
+ }
+```
+
点击右上角的 `sync` 按钮
或者在终端执行：
@@ -470,7 +488,7 @@ ohpm install
> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md)
-### 3.配置 CMakeLists 和引入 GestureHandlerPackage
+### 3.配置 CMakeLists 和引入 RNQuickBase64Package
打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
@@ -527,13 +545,17 @@ std::vector> PackageProvider::getPackages(Package::Cont
}
```
-### 4.在 ArkTs 侧引入 Gesture Handler Package
+### 4.在 ArkTs 侧引入 RNQuickBase64Package Package
打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
```diff
+ // 2.1.2
+ import { RNQuickBase64Package } from '@react-native-oh-tpl/react-native-quick-base64/ts';
+ // 2.2.0
++ import { RNQuickBase64Package } from '@react-native-ohos/react-native-quick-base64/ts';
+
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -561,7 +583,10 @@ ohpm install
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-quick-base64 Releases](https://github.com/react-native-oh-library/react-native-quick-base64/releases)
+在以下版本验证通过：
+
+1. RNOH：0.72.96; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+2. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
> [!TIP] [官方文档](https://github.com/craftzdog/react-native-quick-base64)
@@ -574,14 +599,14 @@ ohpm install
| NAME | Description | TYPE | Required | Platform | HarmonyOS Support |
| ---------------- | --------------------------------------------------------------------------- | ------ | ------ | -------- | -------- |
-| btoa | Encodes a string in base64. | Function | no | All | yes |
-| atob | Decodes a base64 encoded string. | Function | no | All | yes |
-| toByteArray | Takes a base64 string and returns a byte array. Optional `removeLinebreaks` removes all `\n` characters. | Function | no | All | yes |
-| byteLength | Takes a base64 string and returns length of byte array. | Function | no | All | yes |
-| fromByteArray | Takes a byte array and returns a base64 string. Optional `urlSafe` flag `true` will use [the URL-safe dictionary](https://github.com/craftzdog/react-native-quick-base64/blob/9d02dfd02599ca104d2ed6c1e2d938ddd9d6cd15/cpp/base64.h#L75). | Function | no | All | yes |
-| shim | Adds `btoa` and `atob` functions to `global`. | Function | no | All | yes |
-| trimBase64Padding | Trims the `=` padding character(s) off of the end of a base64 encoded string. Also, for base64url encoded strings, it will trim off the trailing `.` character(s). | Function | no | All | yes |
-| getNative | Obtain the native base64ToArrayBuffer and base64FromArrayBuffer functions. | Function | no | All | yes |
+| btoa | 将字符串编码为 base64 格式。 | Function | no | All | yes |
+| atob | 解码一个 base64 编码的字符串。 | Function | no | All | yes |
+| toByteArray | 接收一个 base64 字符串并返回一个字节数组。可选参数 `removeLinebreaks` 用于移除所有 `\n` 字符。 | Function | no | All | yes |
+| byteLength | 接收一个 base64 字符串并返回其字节数组的长度。 | Function | no | All | yes |
+| fromByteArray | 接收一个字节数组并返回一个 base64 字符串。可选参数 `urlSafe` 设为 `true` 时，将使用 [URL 安全的字符集](https://github.com/craftzdog/react-native-quick-base64/blob/9d02dfd02599ca104d2ed6c1e2d938ddd9d6cd15/cpp/base64.h#L75)。 | Function | no | All | yes |
+| shim | 将 `btoa` 和 `atob` 函数添加到 `global` 全局对象中。 | Function | no | All | yes |
+| trimBase64Padding | 去除 base64 编码字符串末尾的 `=` 填充字符。同时，对于 base64url 编码的字符串，它也会去除末尾的 `.` 字符。 | Function | no | All | yes |
+| getNative | 获取原生的 base64ToArrayBuffer 和 base64FromArrayBuffer 函数。 | Function | no | All | yes |
## 遗留问题
diff --git a/zh-cn/react-native-root-toast.md b/zh-cn/react-native-root-toast.md
index bcf63b8facfd20d0af933f0a28db01f129be762d..d7d14d089755d642a0412aa3fa3cf38a907eb0e5 100644
--- a/zh-cn/react-native-root-toast.md
+++ b/zh-cn/react-native-root-toast.md
@@ -13,7 +13,11 @@
-> [!TIP] [Github 地址](https://github.com/magicismight/react-native-root-toast/tree/v3.5.1)
+> [!TIP] [Github 地址](https://github.com/magicismight/react-native-root-toast)
+
+| Version |Supported RN Version |
+| -------- | -------------------- |
+| 4.0.1 | 0.72 / 0.77|
## 安装与使用
@@ -24,13 +28,13 @@
#### **npm**
```bash
-npm install react-native-root-toast@3.5.1
+npm install react-native-root-toast@4.0.1
```
#### **yarn**
```bash
-yarn add react-native-root-toast@3.5.1
+yarn add react-native-root-toast@4.0.1
```
@@ -78,10 +82,15 @@ export function ReactNativeRootToastExample() {
### 兼容性
-本文档内容基于以下版本验证通过：
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+在下述版本验证通过：
1. RNOH: 0.72.20-CAPI; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18;
2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
+3. RNOH：0.72.96; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+4. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+
## 属性
@@ -91,21 +100,21 @@ export function ReactNativeRootToastExample() {
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| --------------- | ------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
-| duration | Toast.durations.SHORT Number The duration of the toast. (Only for api calling method) | Number | no | All | yes |
-| visible | The visibility of toast. (Only for Toast Component) | Bool | no | All | yes |
-| position | The position of toast showing on screen (A negative number represents the distance from the bottom of screen. A positive number represents the distance form the top of screen.)| Number | no | All | yes |
-| animation | Should preform an animation on toast appearing or disappearing. | Bool | no | All | yes |
-| shadow | Should drop shadow around Toast element. | Bool | no | All | yes |
-| backgroundColor | The background color of the toast. | string | no | All | yes |
-| shadowColor | The shadow color of the toast. | string | no | All | yes |
-| textColor | The text color of the toast. | string | no | All | yes |
-| delay | The delay duration before toast start appearing on screen. | Number | no | All | yes |
-| hideOnPress | Should hide toast that appears by pressing on the toast. | Bool | no | All | yes |
-| opacity | The Toast opacity. | Number | no | All | yes |
-| onShow | Callback for toast`s appear animation start | function | no | All | yes |
-| onShown | Callback for toast`s appear animation end | function | no | All | yes |
-| onHide | Callback for toast`s hide animation start | function | no | All | yes |
-| onHidden | Callback for toast`s hide animation end | function | no | All | yes |
+| duration | Toast 的显示时长（仅适用于 API 调用方式） | Number | no | All | yes |
+| visible | Toast 组件的可见性（仅适用于 Toast 组件） | Bool | no | All | yes |
+| position | Toast 在屏幕上的显示位置（负值表示距屏幕底部的距离，正值表示距屏幕顶部的距离）| Number | no | All | yes |
+| animation | Toast 显示或隐藏时是否执行动画效果 | Bool | no | All | yes |
+| shadow | 是否在 Toast 元素周围显示阴影 | Bool | no | All | yes |
+| backgroundColor | Toast 的背景颜色 | string | no | All | yes |
+| shadowColor | Toast 的阴影颜色 | string | no | All | yes |
+| textColor | Toast 的文本颜色 | string | no | All | yes |
+| delay | Toast 开始显示前的延迟时间 | Number | no | All | yes |
+| hideOnPress | 是否允许通过点击 Toast 来隐藏它 | Bool | no | All | yes |
+| opacity | Toast 的透明度 | Number | no | All | yes |
+| onShow | Toast 显示动画开始时的回调函数 | function | no | All | yes |
+| onShown | Toast 显示动画结束时的回调函数 | function | no | All | yes |
+| onHide | Toast 隐藏动画开始时的回调函数 | function | no | All | yes |
+| onHidden | Toast 隐藏动画结束时的回调函数 | function | no | All | yes |
## 遗留问题
diff --git a/zh-cn/react-native-safe-area-context.md b/zh-cn/react-native-safe-area-context.md
index 936fba7970833b750c958991f8d4e882ad1ed039..4998f1bd24af4d72679361e6da2c9ee39d22ec9d 100644
--- a/zh-cn/react-native-safe-area-context.md
+++ b/zh-cn/react-native-safe-area-context.md
@@ -12,11 +12,18 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-safe-area-context)
+> [!TIP] [Github 地址](https://gitcode.com/openharmony-sig/rntpc_react-native-safe-area-context)
+
+该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-safe-area-context`，具体版本所属关系如下：
+
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 4.7.4 | @react-native-oh-tpl/react-native-safe-area-context | [Github](https://github.com/react-native-oh-library/react-native-safe-area-context) | [Github Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) | 0.72 |
+| 5.1.1 | @react-native-ohos/react-native-safe-area-context | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-safe-area-context) | [GitCode Releases]() | 0.77 |
## 安装与使用
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-safe-area-context Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
进入到工程目录并输入以下命令：
@@ -25,13 +32,21 @@
#### **npm**
```bash
+# V4.7.4
npm install @react-native-oh-tpl/react-native-safe-area-context
+
+# V5.1.1
+npm install @react-native-ohos/react-native-safe-area-context
```
#### **yarn**
```bash
+# V4.7.4
yarn add @react-native-oh-tpl/react-native-safe-area-context
+
+# V5.1.1
+yarn add @react-native-ohos/react-native-safe-area-context
```
@@ -53,7 +68,7 @@ const App = () => {
return (
-
+
hello
@@ -94,6 +109,8 @@ export default App;
打开 `entry/oh-package.json5`，添加以下依赖
+- V4.7.4
+
```json
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
@@ -102,6 +119,16 @@ export default App;
}
```
+- V5.1.1
+
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+
+ "@react-native-ohos/react-native-safe-area-context": "file:../../node_modules/@react-native-ohos/react-native-safe-area-context/harmony/safe_area.har"
+ }
+```
+
点击右上角的 `sync` 按钮
或者在终端执行：
@@ -119,7 +146,6 @@ ohpm install
打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
-```diff
```diff
project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
@@ -138,7 +164,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn)
# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+
+# V4.7.4
+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-safe-area-context/src/main/cpp" ./safe-area)
+
+# V5.1.1
++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-safe-area-context/src/main/cpp" ./safe-area)
+
# RNOH_END: manual_package_linking_1
file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
@@ -181,9 +213,12 @@ std::vector> PackageProvider::getPackages(Package::Cont
```diff
...
-
+// V4.7.4
+ import {SafeAreaViewPackage} from '@react-native-oh-tpl/react-native-safe-area-context/ts';
+// V5.1.1
++ import {SafeAreaViewPackage} from '@react-native-ohos/react-native-safe-area-context/ts';
+
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -209,7 +244,11 @@ ohpm install
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-safe-area-context Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases)
+在以下版本验证通过：
+
+1. RNOH：0.72.96; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+2. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+
## 属性
@@ -219,24 +258,24 @@ ohpm install
**组件 SafeAreaProvider**
-You should add `SafeAreaProvider` in your app root component. You may need to add it in other places like the root of modals and routes when using react-native-screens.
+您应该在应用的根组件中添加 `SafeAreaProvider`。在使用 react-native-screens 时，您可能还需要在其他地方添加它，例如模态框和路由的根部。
-Note that providers should not be inside a View that is animated with Animated or inside a ScrollView since it can cause very frequent updates.
+请注意，Provider 不应放在使用 Animated 动画的 View 内或 ScrollView 内，因为这可能导致非常频繁的更新。
| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- |
-| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes |
-| `initialMetrics` | Can be used to provide the initial value for frame and insets, this allows rendering immediatly. See optimization for more information on how to use this prop. | object | no | All | yes |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- |
+| `Props` | 接受所有 View 属性。默认样式为 {flex: 1}。 | object | no | All | yes |
+| `initialMetrics` | 可用于提供 frame 和 insets 的初始值，这允许立即渲染。有关如何使用此属性的更多信息，请参阅优化部分。 | object | no | All | yes |
**组件 SafeAreaView**
-`SafeAreaView` is a regular View component with the safe area insets applied as padding or margin.
+`SafeAreaView` 是一个常规的 View 组件，并将安全区域插入（insets）应用为 padding 或 margin。
| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ------- | ----------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- |
-| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes |
-| `edges` | Sets the edges to apply the safe area insets to. Defaults to all. | array | no | All | yes |
-| `mode` | Optional, padding (default) or margin. Apply the safe area to either the padding or the margin. | string | no | All | yes |
+| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- |
+| `Props` | 接受所有 View 属性。默认样式为 {flex: 1}。 | object | no | All | yes |
+| `edges` | 设置要应用安全区域插入的边。默认为全部。 | array | no | All | yes |
+| `mode` | 可选，padding（默认）或 margin。将安全区域应用到 padding 或 margin。 | string | no | All | yes |
# API
@@ -244,14 +283,14 @@ Note that providers should not be inside a View that is animated with Animated o
> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| ---- | ----------- |----------|----------| -------- | ------------------ |
-| useSafeAreaInsets | Returns the safe area insets of the nearest provider. | object | no | All | yes |
-| useSafeAreaFrame | Returns the frame of the nearest provider. This can be used as an alternative to the Dimensions module. | object | no | All | yes |
-| SafeAreaInsetsContext | React Context with the value of the safe area insets. | object | no | All | yes |
-| withSafeAreaInsets | Higher order component that provides safe area insets as the insets prop. | function | no | All | yes |
-| SafeAreaFrameContext | React Context with the value of the safe area frame. | object | no | All | yes |
-| initialWindowMetrics | Insets and frame of the window on initial render. This can be used with the initialMetrics from SafeAreaProvider | object | no | All | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ------------------ |
+| useSafeAreaInsets | 返回最近 Provider 的安全区域插入（insets）。 | object | no | All | yes |
+| useSafeAreaFrame | 返回最近 Provider 的 frame。这可以替代 Dimensions 模块使用。 | object | no | All | yes |
+| SafeAreaInsetsContext | 提供安全区域插入（insets）值的 React Context。 | object | no | All | yes |
+| withSafeAreaInsets5.1.1+ | 高阶组件，将安全区域插入（insets）作为 insets 属性提供。 | function | no | All | yes |
+| SafeAreaFrameContext | 提供安全区域 frame 值的 React Context。 | object | no | All | yes |
+| initialWindowMetrics | 初始渲染时窗口的插入（insets）和 frame。这可以与 SafeAreaProvider 的 initialMetrics 一起使用。 | object | no | All | yes |
## 遗留问题
diff --git a/zh-cn/react-native-simple-toast.md b/zh-cn/react-native-simple-toast.md
index 02d9de5274633b3187b404ae919b2db388792135..50cc8cb043d83d1a83f39e7d19f89ac547550203 100644
--- a/zh-cn/react-native-simple-toast.md
+++ b/zh-cn/react-native-simple-toast.md
@@ -14,10 +14,16 @@
> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-simple-toast)
+该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-simple-toast`，具体版本所属关系如下：
+
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 3.3.1 | @react-native-oh-tpl/react-native-simple-toast | [Github](https://github.com/react-native-oh-library/react-native-simple-toast) | [Github Releases](https://github.com/react-native-oh-library/react-native-simple-toast/releases) | 0.72 |
+| 3.4.0 | @react-native-ohos/react-native-simple-toast | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-simple-toast) | [GitCode Releases]() | 0.77 |
## 安装与使用
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-simple-toast Releases](https://github.com/react-native-oh-library/react-native-simple-toast/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
进入到工程目录并输入以下命令：
@@ -26,13 +32,21 @@
#### **npm**
```bash
+# V3.3.1
npm install @react-native-oh-tpl/react-native-simple-toast
+
+# V3.4.0
+npm install @react-native-ohos/react-native-simple-toast
```
#### **yarn**
```bash
+# V3.3.1
yarn add @react-native-oh-tpl/react-native-simple-toast
+
+# V3.4.0
+yarn add @react-native-ohos/react-native-simple-toast
```
@@ -174,9 +188,10 @@ export default ToastTest;
### 兼容性
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机ROM。
-本文档内容基于以下版本验证通过：
+1. RNOH：0.72.23; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.19
+2. RNOH：0.72.96; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+3. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
-RNOH：0.72.23; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.19
## API
@@ -198,15 +213,16 @@ RNOH：0.72.23; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.
> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-| Name | Description | Type | Required | HarmonyOS Support |
-| ---- |------------------|------------------| -------- | ------------------ |
-LONG | toast显示时间:LONG | number | / | yes
-SHORT | toast显示时间：SHORT | number | / | yes
-TOP | toast显示位置:TOP | number | / | no
-BOTTOM | toast显示位置:BOTTOM | number | / | no
-CENTER | toast显示位置:CENTER | number | / | no
+| Name | Description | Type | Required | HarmonyOS Support |
+| ------ | -------------------- | ------ | -------- | ----------------- |
+| LONG | toast显示时间:LONG | number | / | yes |
+| SHORT | toast显示时间：SHORT | number | / | yes |
+| TOP | toast显示位置:TOP | number | / | no |
+| BOTTOM | toast显示位置:BOTTOM | number | / | no |
+| CENTER | toast显示位置:CENTER | number | / | no |
## 遗留问题
+
- [ ] HarmonyOS toast不支持修改字体，背景色等样式[issue#3](https://github.com/react-native-oh-library/react-native-simple-toast/issues/3)
- [ ] HarmonyOS rn框架toast组件不支持设置位置及偏移[issue#2](https://github.com/react-native-oh-library/react-native-simple-toast/issues/2)
diff --git a/zh-cn/react-native-spinkit.md b/zh-cn/react-native-spinkit.md
index 092345f403d9de167442f7a0ad0211ab675b2e66..30a6f17da1b111d7e8791bb6c5dbd8b3bf0d92c4 100644
--- a/zh-cn/react-native-spinkit.md
+++ b/zh-cn/react-native-spinkit.md
@@ -17,10 +17,14 @@
> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-spinkit)
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 1.5.1 | @react-native-oh-tpl/react-native-spinkit | [Github](https://github.com/react-native-oh-library/react-native-spinkit) | [Github Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.72 |
+| 1.6.0 | @react-native-ohos/react-native-spinkit | [Github](https://github.com/react-native-oh-library/react-native-spinkit) | [Github Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases) | 0.77 |
## 安装与使用
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-spinkit Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
进入到工程目录并输入以下命令：
@@ -29,13 +33,21 @@
#### **npm**
```bash
+# 1.5.1
npm install @react-native-oh-tpl/react-native-spinkit
+
+# 1.6.0
+npm install @react-native-ohos/react-native-spinkit
```
#### **yarn**
```bash
+# 1.5.1
yarn add @react-native-oh-tpl/react-native-spinkit
+
+# 1.6.0
+yarn add @react-native-ohos/react-native-spinkit
```
@@ -96,14 +108,20 @@ export default SpinKit;
> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
打开 `entry/oh-package.json5`，添加以下依赖
-
+- 1.5.1
```json
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
"@react-native-oh-tpl/react-native-spinkit": "file:../../node_modules/@react-native-oh-tpl/react-native-spinkit/harmony/spinKit.har"
}
```
-
+- 1.6.0
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+ "@react-native-ohos/react-native-spinkit": "file:../../node_modules/@react-native-ohos/react-native-spinkit/harmony/spinKit.har"
+ }
+```
点击右上角的 `sync` 按钮
或者在终端执行：
@@ -124,8 +142,12 @@ ohpm install
```diff
...
+ // 1.5.1
+ import { SpinKitView } from "@react-native-oh-tpl/react-native-spinkit"
+ // 1.6.0
++ import { SpinKitView } from "@react-native-ohos/react-native-spinkit"
+
@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
...
@@ -157,8 +179,12 @@ const arkTsComponentNames: Array = [
```diff
...
+ // 1.5.1
+ import { RNSpinKitPackage } from '@react-native-oh-tpl/react-native-spinkit/ts';
+ // 1.6.0
++ import { RNSpinKitPackage } from '@react-native-ohos/react-native-spinkit/ts';
+
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -185,8 +211,11 @@ ohpm install
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+在以下版本验证通过：
+
+1. RNOH：0.72.96; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+2. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-spinkit Releases](https://github.com/react-native-oh-library/react-native-spinkit/releases)
## 属性
@@ -198,26 +227,25 @@ ohpm install
| props | Description | Type | Required | Platform | HarmonyOS Support |
| ---- | ----------- | ---- | -------- | ---- | ------------ |
-| type | Types of Load Animations | string | No | All | Yes |
-| type: Plane | One Direction Flip Loading Animation | string | No | All | Yes |
-| type: CircleFlip | A circle flips to load animation | string | No | All | Yes |
-| type: Bounce | A circular nested loading animation | string | No | All | Yes |
-| type: Wave | Five-bar group loading animation | string | No | All | Yes |
-| type: WanderingCubes | Two squares skip loading animation | string | No | All | Yes |
-| type: Pulse | A circular diffusion loading animation | string | No | All | Yes |
-| type: ChansingDots | Two Circles Bounce Loading Animation | string | No | All | Yes |
-| type: ThreeBounce | Three circles display the loading animation in sequence. | string | No | All | Yes |
-| type: Circle | Multiple circular circular motion loading animation | string | No | All | Yes |
-| type: 9CubeGrid | The nine squares display the loading animation in sequence | string | No | All | Yes |
-| type: WordPress | Round wheel inline hollow circle rotating Loading animation | string | No | IOS | Yes |
-| type: FadingCircle | Multiple square circular motion loading animation | string | No | All | Yes |
-| type: FadingCircleAlt | Multiple circular circular motion loading animation | string | No | All | Yes |
-| type: Arc | Rotating ring with notch loading animation | string | No | IOS | Yes |
-| type: ArcAlt | Circular progress bar style loading animation | string | No | IOS | Yes |
-| isVisible | Visibility of the spinner | boolean | No | All | Yes |
-| color | Color of the spinner | string | No | All | Yes |
-| size | Visibility of the spinner | number | No | All | Yes |
-
+| type | 加载动画类型 | string | No | All | Yes |
+| type: Plane | 单向翻转加载动画 | string | No | All | Yes |
+| type: CircleFlip | 圆形翻转加载动画 | string | No | All | Yes |
+| type: Bounce | 圆形嵌套弹跳加载动画 | string | No | All | Yes |
+| type: Wave | 五条柱状组合加载动画 | string | No | All | Yes |
+| type: WanderingCubes | 两个方块跳跃加载动画 | string | No | All | Yes |
+| type: Pulse | 圆形扩散加载动画 | string | No | All | Yes |
+| type: ChasingDots | 双圆弹跳加载动画 | string | No | All | Yes |
+| type: ThreeBounce | 三个圆点依次显示的加载动画 | string | No | All | Yes |
+| type: Circle | 多个圆点循环运动加载动画 | string | No | All | Yes |
+| type: 9CubeGrid | 九个方块依次显示的加载动画 | string | No | All | Yes |
+| type: WordPress | 圆形轮辐内嵌空心圆旋转加载动画 | string | No | IOS | Yes |
+| type: FadingCircle | 多个方块环形运动加载动画 | string | No | All | Yes |
+| type: FadingCircleAlt | 多个圆点环形运动加载动画 | string | No | All | Yes |
+| type: Arc | 带缺口旋转环状加载动画 | string | No | IOS | Yes |
+| type: ArcAlt | 圆形进度条样式加载动画 | string | No | IOS | Yes |
+| isVisible | 加载动画显示状态 | boolean | No | All | Yes |
+| color | 加载动画颜色 | string | No | All | Yes |
+| size | 加载动画尺寸 | number | No | All | Yes |
## 遗留问题
diff --git a/zh-cn/react-native-tab-view.md b/zh-cn/react-native-tab-view.md
index db6a3aae54f75891eea885530e98379c9bc75270..8a37ed2a9ad1d92f36957e1cde7b5dc3c400f208 100644
--- a/zh-cn/react-native-tab-view.md
+++ b/zh-cn/react-native-tab-view.md
@@ -14,9 +14,16 @@
> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig)
+该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-tab-view`，具体版本所属关系如下：
+
+| Version | Package Name | Repository | Release |Supported RN Version |
+| ------------------------------ | ---------------- | ------------------- | ------------------- | -------------------- |
+| 3.5.2 | @react-native-oh-tpl/react-native-tab-view | [Github](https://github.com/react-native-oh-library/react-navigation) | [Github Releases](https://github.com/react-native-oh-library/react-navigation/releases) | 0.72 |
+| 4.0.11 | @react-native-ohos/react-native-tab-view | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-navigation/tree/master/packages/react-native-tab-view) | [GitCode Releases]() | 0.77 |
+
## 安装与使用
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-tab-view Releases](https://github.com/react-native-oh-library/react-navigation/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
进入到工程目录并输入以下命令：
@@ -25,13 +32,21 @@
#### **npm**
```bash
+# V3.5.2
npm install @react-native-oh-tpl/react-native-tab-view
+
+# V4.0.11
+npm install @react-native-ohos/react-native-tab-view
```
#### **yarn**
```bash
+# V3.5.2
yarn add @react-native-oh-tpl/react-native-tab-view
+
+# V4.0.11
+yarn add @react-native-ohos/react-native-tab-view
```
@@ -202,7 +217,10 @@ const styles = StyleSheet.create({
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/react-native-tab-view Releases](https://github.com/react-native-oh-library/react-navigation/releases/)
+在以下版本验证通过：
+
+1. RNOH：0.72.96; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
+2. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release SDK; IDE：DevEco Studio 5.1.1.840; ROM：6.0.0;
## 属性
@@ -211,54 +229,59 @@ const styles = StyleSheet.create({
> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
**TabView**：选项卡组件
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-|-----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|----------|----------|-------------------|
-| navigationState | State for the tab view. | fucntion | yes | all | yes |
-| onIndexChange | Callback which is called on tab change, receives the index of the new tab as argument. The navigation state needs to be updated when it's called, otherwise the change is dropped. | function | yes | all | yes |
-| renderScene | Callback which returns a react element to render as the page for the tab. | function | yes | all | yes |
-| renderTabBar | Callback which returns a custom React Element to use as the tab bar | function | no | all | yes |
-| tabBarPosition | Position of the tab bar in the tab view. | 'top'|'bottom' | no | all | yes |
-| lazy | Function which takes an object with the current route and returns a boolean to indicate whether to lazily render the scenes. | function | no | all | yes |
-| lazyPreloadDistance | When lazy is enabled, you can specify how many adjacent routes should be preloaded with this prop. This value defaults to 0 which means lazy pages are loaded as they come into the viewport. | number | no | all | yes |
-| renderLazyPlaceholder | Callback which returns a custom React Element to render for routes that haven't been rendered yet. Receives an object containing the route as the argument. The lazy prop also needs to be enabled. | string | no | all | yes |
-| keyboardDismissMode | String indicating whether the keyboard gets dismissed in response to a drag gesture. | 'auto'|'on-drag'|'none' | no | all | yes |
-| swipeEnabled | Boolean indicating whether to enable swipe gestures. Swipe gestures are enabled by default. Passing false will disable swipe gestures, but the user can still switch tabs by pressing the tab bar. | boolean | no | all | yes |
-| animationEnabled | Enables animation when changing tab. By default it's true. | boolean | no | all | yes |
-| onSwipeStart | Callback which is called when the swipe gesture starts, i.e. the user touches the screen and moves it. | boolean | no | all | yes |
-| onSwipeEnd | Callback which is called when the swipe gesture ends, i.e. the user lifts their finger from the screen after the swipe gesture. | boolean | no | all | yes |
-| initialLayout | Object containing the initial height and width of the screens. Passing this will improve the initial rendering performance. | object | no | all | yes |
-| overScrollMode | Used to override default value of pager's overScroll mode. Can be auto, always or never (Android only). | 'auto'|'always'|'never' | no | Android | yes |
-| sceneContainerStyle | Style to apply to the view wrapping each screen. You can pass this to override some default styles such as overflow clipping | object | no | all | yes |
-| pagerStyle | Style to apply to the pager view wrapping all the scenes. | object | no | all | yes |
-| style | Style to apply to the tab view container. | object | no | all | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------------------------------------------- | ------------------------------------------------------------ | --------------------------------- | -------- | -------- | ----------------- |
+| navigationState | 标签页视图的状态 | fucntion | yes | all | yes |
+| onIndexChange | 标签切换时调用的回调函数，接收新标签的索引作为参数。调用时需要更新导航状态，否则更改将被丢弃 | function | yes | all | yes |
+| renderScene | 返回要渲染为标签页面的React元素的回调函数 | function | yes | all | yes |
+| renderTabBar | 返回要用作标签栏的自定义React元素的回调函数 | function | no | all | yes |
+| tabBarPosition | 标签栏在标签页视图中的位置 | 'top'|'bottom' | no | all | yes |
+| lazy | 接收当前路由对象并返回布尔值的函数，指示是否延迟渲染场景 | function | no | all | yes |
+| lazyPreloadDistance | 当启用`lazy`时，可指定应预加载多少相邻路由。此值默认为`0`，表示延迟页面在进入视口时加载 | number | no | all | yes |
+| renderLazyPlaceholder | 返回要为尚未渲染的路由渲染的自定义React元素的回调函数。接收包含路由的对象作为参数。还需要启用`lazy`属性 | string | no | all | yes |
+| keyboardDismissMode | 指示键盘是否响应拖拽手势而关闭的字符串 | 'auto'|'on-drag'|'none' | no | all | yes |
+| swipeEnabled | 指示是否启用手势滑动的布尔值。默认启用手势滑动。传递`false`将禁用手势滑动，但用户仍可通过按下标签栏切换标签 | boolean | no | all | yes |
+| animationEnabled | 切换标签时启用动画。默认为true | boolean | no | all | yes |
+| onSwipeStart | 手势滑动开始时调用的回调函数，即用户触摸屏幕并移动时 | boolean | no | all | yes |
+| onSwipeEnd | 手势滑动结束时调用的回调函数，即用户在滑动手势后从屏幕抬起手指时 | boolean | no | all | yes |
+| initialLayout | 包含屏幕初始高度和宽度的对象。传递此对象将提高初始渲染性能 | object | no | all | yes |
+| overScrollMode | 用于覆盖页面滚动器的overScroll模式默认值。可以是`auto`、`always`或`never`（仅Android） | 'auto'|'always'|'never' | no | Android | yes |
+| sceneContainerStyledeprecated from 4.0.11 | 应用于包装每个屏幕的视图的样式。可传递此属性以覆盖某些默认样式，如溢出裁剪 | object | no | all | yes |
+| pagerStyle | 应用于包装所有场景的页面视图的样式 | object | no | all | yes |
+| style | 应用于标签页视图容器的样式 | object | no | all | yes |
+| options4.0.11+ | - | Record> | no | all | yes |
+| commonOptions4.0.11+ | - | TabDescriptor | no | all | yes |
+| direction4.0.11+ | 布局的书写方向 | LocaleDirection | no | all | yes |
**TabBar**：选项卡标签栏
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|----------|----------|-------------------|
-| getLabelText | Function which takes an object with the current route and returns the label text for the tab. Uses route.title by default. | function | no | all | yes |
-| getAccessible | Function which takes an object with the current route and returns a boolean to indicate whether to mark a tab as accessible. Defaults to true. | function | no | all | yes |
-| getAccessibilityLabel | Function which takes an object with the current route and returns a accessibility label for the tab button. Uses route.accessibilityLabel by default if specified, otherwise uses the route title. | function | no | all | yes |
-| renderIcon | Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a icon. | function | no | all | yes |
-| renderLabel | Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a label. | function | no | all | yes |
-| renderTabBarItem | Function which takes a TabBarItemProps object and returns a custom React Element to be used as a tab button. | function | no | all | yes |
-| renderIndicator | Function which takes an object with the current route and returns a custom React Element to be used as a tab indicator. | function | no | all | yes |
-| renderBadge | Function which takes an object with the current route and returns a custom React Element to be used as a badge. | function | no | all | yes |
-| onTabPress | Function to execute on tab press. It receives the scene for the pressed tab, useful for things like scroll to top. | function | no | all | yes |
-| onTabLongPress | Function to execute on tab long press, use for things like showing a menu with more options | function | no | all | yes |
-| activeColor | Custom color for icon and label in the active tab. | string | no | all | yes |
-| inactiveColor | Custom color for icon and label in the inactive tab. | string | no | all | yes |
-| pressColor | Color for material ripple (Android >= 5.0 only). | string | no | Android | no |
-| pressOpacity | Opacity for pressed tab (iOS and Android < 5.0 only). | number | no | all | yes |
-| scrollEnabled | Boolean indicating whether to make the tab bar scrollable. | boolean | no | all | yes |
-| bounces | Boolean indicating whether the tab bar bounces when scrolling. | boolean | no | iOS | no |
-| tabStyle | Style to apply to the individual tab items in the tab bar. | object | no | all | yes |
-| indicatorStyle | Style to apply to the active indicator. | object | no | all | yes |
-| indicatorContainerStyle | Style to apply to the container view for the indicator. | object | no | all | yes |
-| labelStyle | Style to apply to the tab item label. | object | no | all | yes |
-| contentContainerStyle | Style to apply to the inner container for tabs. | object | no | all | yes |
-| style (TabBar) | Style to apply to the tab bar container. | object | no | all | yes |
-| gap | Define a spacing between tabs. | number | no | all | yes |
-
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------------------------------------ | ------------------------------------------------------------ | -------------------------------- | -------- | -------- | ----------------- |
+| getLabelTextdeprecated from 4.0.11 | 接收当前路由对象并返回标签文本的函数。默认使用`route.title` | function | no | all | yes |
+| getAccessibledeprecated from 4.0.11 | 接收当前路由对象并返回布尔值的函数，指示是否将标签标记为`accessible`。默认为`true` | function | no | all | yes |
+| getAccessibilityLabeldeprecated from 4.0.11 | 接收当前路由对象并返回标签按钮的无障碍标签的函数。如果指定了`route.accessibilityLabel`则默认使用，否则使用路由标题 | function | no | all | yes |
+| renderIcondeprecated from 4.0.11 | 接收当前路由对象、聚焦状态和颜色并返回要用作图标的自定义React元素的函数 | function | no | all | yes |
+| renderLabeldeprecated from 4.0.11 | 接收当前路由对象、聚焦状态和颜色并返回要用作标签的自定义React元素的函数 | function | no | all | yes |
+| renderTabBarItem | 接收`TabBarItemProps`对象并返回要用作标签按钮的自定义React元素的函数 | function | no | all | yes |
+| renderIndicator | 接收当前路由对象并返回要用作标签指示器的自定义React元素的函数 | function | no | all | yes |
+| renderBadgedeprecated from 4.0.11 | 接收当前路由对象并返回要用作徽章的自定义React元素的函数 | function | no | all | yes |
+| onTabPress | 标签按下时执行的函数。接收按下标签的场景，可用于滚动到顶部等操作 | function | no | all | yes |
+| onTabLongPress | 标签长按时执行的函数，用于显示包含更多选项的菜单等操作 | function | no | all | yes |
+| activeColor | 活动标签中图标和标签的自定义颜色 | string | no | all | yes |
+| inactiveColor | 非活动标签中图标和标签的自定义颜色 | string | no | all | yes |
+| pressColor | Material涟漪效果的颜色（仅Android >= 5.0） | string | no | Android | no |
+| pressOpacity | 按下标签的不透明度（仅iOS和Android < 5.0） | number | no | all | yes |
+| scrollEnabled | 指示是否使标签栏可滚动的布尔值 | boolean | no | all | yes |
+| bounces | 指示标签栏滚动时是否具有弹跳效果的布尔值 | boolean | no | iOS | no |
+| tabStyle | 应用于标签栏中各个标签项的样式 | object | no | all | yes |
+| indicatorStyle | 应用于活动指示器的样式 | object | no | all | yes |
+| indicatorContainerStyle | 应用于指示器容器视图的样式 | object | no | all | yes |
+| labelStyledeprecated from 4.0.11 | 应用于标签项标签的样式 | object | no | all | yes |
+| contentContainerStyle | 应用于标签内部容器的样式 | object | no | all | yes |
+| style (TabBar) | 应用于标签栏容器的样式 | object | no | all | yes |
+| gap | 定义标签之间的间距 | number | no | all | yes |
+| direction4.0.11+ | 布局的书写方向 | LocaleDirection | no | all | yes |
+| layout4.0.11+ | - | Layout | no | all | yes |
+| options4.0.11+ | - | Record> | no | all | yes |
## 遗留问题
- [x] 已解决： 页面滑动时，有概率卡在中间，无法自动回正[issue#5](https://github.com/react-native-oh-library/react-navigation/issues/5)
@@ -270,4 +293,4 @@ const styles = StyleSheet.create({
## 开源协议
-本项目基于 [The MIT License (MIT)](https://github.com/satya164/react-native-tab-view/blob/main/LICENSE.md) ，请自由地享受和参与开源。
\ No newline at end of file
+本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/main/packages/react-native-tab-view/LICENSE) ，请自由地享受和参与开源。
\ No newline at end of file
@@ -12,38 +12,51 @@