From 6f5262c3d364897155f3e7c2e9a8bd94eee8d557 Mon Sep 17 00:00:00 2001 From: Louis-C7 Date: Tue, 26 Nov 2024 11:08:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=EF=BC=88=E8=8B=B1=E6=96=87=EF=BC=89?= =?UTF-8?q?=E6=96=B0=E5=A2=9Eopenharmony-sig=E7=89=88=E6=9C=AC=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E6=A8=A1=E6=9D=BF=E4=B8=8E=E6=89=93=E6=A0=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/model-gitee.md | 285 ++++++++++++++++++++++++++ en/react-native-linear-gradient.md | 65 +++--- zh-cn/model-gitee.md | 12 +- zh-cn/react-native-linear-gradient.md | 4 +- 4 files changed, 323 insertions(+), 43 deletions(-) create mode 100644 en/model-gitee.md diff --git a/en/model-gitee.md b/en/model-gitee.md new file mode 100644 index 00000000..ff004fa1 --- /dev/null +++ b/en/model-gitee.md @@ -0,0 +1,285 @@ +# 文档模板(删除) + +> [!ATTENTION] When using this template, delete the statements that end with "(Delete)". (Delete) + +> Template version: v0.3.0 + +

+

原库 npm 包名

+

+ +This project is based on [原库 npm 名称@x.x.x](原库仓库连接)。 + +This third-party library has been migrated to Gitee and is now available for direct download from npm, the new package name is: `@react-native-ohos/react-native-linear-gradient`, The version correspondence details are as follows: + +| Version | Package Name | Repository | Release | +| ------------------------- | ------------------------------------------------- | ------------------ | -------------------------- | +| <= 3.0.0-0.5.0@deprecated | @react-native-oh-tpl/react-native-linear-gradient | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-linear-gradient) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | +| > 3.0.0 | @react-native-ohos/react-native-linear-gradient | [Gitee](https://gitee.com/openharmony-sig/rntpc_react-native-linear-gradient) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_react-native-linear-gradient/releases) | + +## 1. Installation and Usage + +Go to the project directory and execute the following instruction: + + + +#### **npm** + +```bash +npm install @react-native-ohos/库名 +``` + +#### **yarn** + +```bash +yarn add @react-native-ohos/库名 +``` + + + +The following code shows the basic use scenario of the repository: + +> [!WARNING] The name of the imported repository remains unchanged. + +```js +// react-native-safe-area-context is used as an example. +import React from "react"; +import { Text, View } from "react-native"; +import { + SafeAreaProvider, + SafeAreaView, + initialWindowMetrics, +} from "react-native-safe-area-context"; + +const App = () => { + return ( + + + + hello + + + + ); +}; + +export default App; +``` + +## 2. Manual Link + +This step provides guidance for manually configuring native dependencies. + +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. + +### 2.1 Overrides RN SDK + +To ensure the project relies on the same version of the RN SDK, you need to add an `overrides` field in the project's root `oh-package.json5` file, specifying the RN SDK version to be used. The replacement version can be a specific version number, a semver range, or a locally available HAR package or source directory. + +For more information about the purpose of this field, please refer to the [official documentation](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#en-us_topic_0000001792256137_overrides). + +```json +{ + "overrides": { + "@rnoh/react-native-openharmony": "^0.72.38" // ohpm version + // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // a locally available HAR package + // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // source code directory + } +} +``` + +### 2.2 Introducing Native Code + +Currently, two methods are available: + +- Use the HAR file. +- Directly link to the source code。 + +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: + +```json +"dependencies": { + "@react-native-ohos/Package_Name": "file:../../node_modules/@react-native-ohos/Package_Name/harmony/xxx.har" + // NOTE: "@react-native-ohos/react-native-safe-area-context": "file:../../node_modules/@react-native-ohos/react-native-safe-area-context/harmony/safe_area.har"(Delete) + } +``` + +Click the `sync` button in the upper right corner. + +Alternatively, run the following instruction on the terminal: + +```bash +cd entry +ohpm install +``` + +Method 2: Directly link to the source code. + +> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). + +### 2.3 Configuring CMakeLists and Introducing xxx Package + +**若涉及接入 codegen-lib 导致的配置项新增，需要在配置项前明确声明：> [!TIP] Version vx.x.x and above requires.**(Delete) + +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: + +```diff ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") + +# RNOH_BEGIN: manual_package_linking_1 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-safe-area-context/src/main/cpp" ./safe-area) +# RNOH_END: manual_package_linking_1 + +# RNOH_BEGIN: manual_package_linking_2 ++ target_link_libraries(rnoh_app PUBLIC rnoh_safe_area) +# RNOH_END: manual_package_linking_2 +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" ++ #include "SafeAreaViewPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4. Introducing xxx Component to ArkTS + +Find `function buildCustomRNComponent()`, which is usually located in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets`, and add the following code: + +```diff + ... ++ import { SAFE_AREA_VIEW_TYPE, SafeAreaView, SAFE_AREA_PROVIDER_TYPE, SafeAreaProvider } from "@react-native-ohos/react-native-safe-area-context" + +@Builder +export function buildCustomRNComponent(ctx: ComponentBuilderContext) { + ... ++ if (ctx.componentName === SAFE_AREA_VIEW_TYPE) { ++ SafeAreaView({ ++ ctx: ctx.rnComponentContext, ++ tag: ctx.tag ++ }) ++ } +... +} +... +``` + +Find the constant `arkTsComponentNames` in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets` and add the component name to the array. + +```diff +const arkTsComponentNames: Array = [ + SampleView.NAME, ++ RNC_VIDEO_TYPE + ]; +``` + +**提示：TurboModule**(Delete) + +### 2.5 Introducing xxx Package to ArkTS + +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: + +```diff + ... ++ import {SafeAreaViewPackage} from '@react-native-ohos/react-native-safe-area-context/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ ++ new SafeAreaViewPackage(ctx) + ]; +} +``` + +### 2.6 Running + +Click the `sync` button in the upper right corner. + +Alternatively, run the following instruction on the terminal: + +```bash +cd entry +ohpm install +``` + +Then build and run the code. + +## 3. Constraints + +### 3.1 Compatibility + +**修改了原库代码的库使用下述描述**(Delete) + +Check the release version information in the release address of the third-party library: [\ Releases](https://github.com//releases) + +Example: [@react-native-oh-tpl/react-native-safe-area-context Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) (Delete) + +**未修改原库代码的库使用下述描述**(Delete) + +This document is verified based on the following versions: + +(Example) + +1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; + +### 3.2 Permission Requirements (If Any) + +(Enter the related permission configuration.) + +## 4. Properties (If Any) + +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. + +> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| XXX | XXX | XXX | (yes/no) | xxx | (yes/no/partially) | + +## 5. Static Methods (If Any) + +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. + +> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| XXX | XXX | XXX | (yes/no) | xxx | (yes/no/partially) | + +## 6. APIs (TurboModules, If Any) + +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. + +> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| XXX | XXX | XXX | (yes/no) | xxx | (yes/no/partially) | + +## 7. Known Issues + +- [ ] xxx issue: [issue#\*\*\*](issue address 1) +- [ ] yyy issue: [issue#\*\*\*](issue address 2) + +## 8. Others + +**其他补充说明（删除）** + +## 9. License + +This project is licensed under [XXX License (XXX)](gitee仓库的LICENSE链接). + +Example: This project is licensed under [MIT License](https://gitee.com/openharmony-sig/rntpc_react-native-linear-gradient/blob/master/LICENSE). (Delete) diff --git a/en/react-native-linear-gradient.md b/en/react-native-linear-gradient.md index d8125650..e2800889 100644 --- a/en/react-native-linear-gradient.md +++ b/en/react-native-linear-gradient.md @@ -1,28 +1,19 @@ -> Template version: v0.2.1 +> Template version: v0.3.0

react-native-linear-gradient

-

- - Supported platforms - - - License - -

- -> [Gitee Repository](https://gitee.com/openharmony-sig/rntpc_react-native-linear-gradient) -> [Gitee Releases: @react-native-ohos/react-native-linear-gradient](https://gitee.com/openharmony-sig/rntpc_react-native-linear-gradient/releases) +This project is based on [react-native-linear-gradient@3.0.0-alpha.1](https://github.com/react-native-linear-gradient/react-native-linear-gradient)。 -> [Github Repository(deprecated)](https://github.com/react-native-oh-library/react-native-linear-gradient) +This third-party library has been migrated to Gitee and is now available for direct download from npm, the new package name is: `@react-native-ohos/react-native-linear-gradient`, The version correspondence details are as follows: -> [Github Releases(<= 3.0.0-0.5.0): @react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) +| Version | Package Name | Repository | Release | +| ------------------------- | ------------------------------------------------- | ------------------ | -------------------------- | +| <= 3.0.0-0.5.0@deprecated | @react-native-oh-tpl/react-native-linear-gradient | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-linear-gradient) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | +| > 3.0.0 | @react-native-ohos/react-native-linear-gradient | [Gitee](https://gitee.com/openharmony-sig/rntpc_react-native-linear-gradient) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_react-native-linear-gradient/releases) | -## Installation and Usage - -`This third-party library has been migrated to Gitee and is now available for direct download from npm, the new package name is: @react-native-ohos/react-native-linear-gradient` +## 1. Installation and Usage Go to the project directory and execute the following instruction: @@ -97,28 +88,36 @@ var styles = StyleSheet.create({ }); ``` -## Link +## 2. Manual Link + +This step provides guidance for manually configuring native dependencies. -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -Open the harmony directory of the HarmonyOS project in DevEco Studio. +### 2.1 Overrides RN SDK -### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project +To ensure the project relies on the same version of the RN SDK, you need to add an `overrides` field in the project's root `oh-package.json5` file, specifying the RN SDK version to be used. The replacement version can be a specific version number, a semver range, or a locally available HAR package or source directory. + +For more information about the purpose of this field, please refer to the [official documentation](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#en-us_topic_0000001792256137_overrides). ```json { - ... "overrides": { - "@rnoh/react-native-openharmony" : "./react_native_openharmony" + "@rnoh/react-native-openharmony": "^0.72.38" // ohpm version + // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // a locally available HAR package + // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // source code directory } } ``` -### 2. Introducing Native Code +### 2.2 Introducing Native Code Currently, two methods are available: -1. Method 1 (recommended): Use the HAR file. +- Use the HAR file. +- Directly link to the source code。 + +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. @@ -143,7 +142,7 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code.](/en/link-source-code.md) -### 3. Configuring CMakeLists and Introducing LinearGradientPackage Package +### 2.3 Configuring CMakeLists and Introducing LinearGradientPackage Package Open entry/src/main/cpp/CMakeLists.txt and add the following code: @@ -176,7 +175,7 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4. Running +### 2.4 Running Click the sync button in the upper right corner. @@ -189,11 +188,9 @@ ohpm install Then build and run the code. -## Constraints +## 3. Constraints -## 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. +## 3.1 Compatibility Check the release version information in the release address of the third-party library: [@react-native-ohos/react-native-linear-gradient Releases](https://gitee.com/openharmony-sig/rntpc_react-native-linear-gradient/releases) @@ -213,12 +210,10 @@ Check the release version information in the release address of the third-party | start | Starting point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | yes | | end | End point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | yes | -## Known Issues +## 5. Known Issues - The current version of HarmonyOS does not support angleCenter. -## Others - -## License +## 6. License This project is licensed under [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_react-native-linear-gradient/blob/master/LICENSE). diff --git a/zh-cn/model-gitee.md b/zh-cn/model-gitee.md index 274b17a5..bb96defe 100644 --- a/zh-cn/model-gitee.md +++ b/zh-cn/model-gitee.md @@ -5,12 +5,12 @@ > 模板版本：v0.3.0

-

<原库 npm 包名>

+

原库 npm 包名

本项目基于 [原库 npm 名称@x.x.x](原库仓库连接) 开发。 -`该第三方库的仓库已迁移至 Gitee，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-linear-gradient，具体版本所属关系如下` +该第三方库的仓库已迁移至 Gitee，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-linear-gradient`，具体版本所属关系如下： | Version | Package Name | Repository | Release | | ------------------------- | ------------------------------------------------- | ------------------ | -------------------------- | @@ -241,13 +241,13 @@ ohpm install （填入相关权限配置） -**以下属性、静态方法、API 需要检查说明中手机平台描述，例如已支持 HarmonyOS 的接口并且说明中提到 ios 和 android，那么需要检查是否补充 harmony 进到描述中。示例如下（删除）** +**以下属性、静态方法、API 需要检查说明中手机平台描述，例如已支持 HarmonyOS 的接口并且说明中提到 iOS 和 Android，那么需要检查是否补充 HarmonyOS 进到描述中。示例如下（删除）** ``` // 原描述 Needed for Android to work properly with assets, iOS will ignore it. // 修改后 -Needed for Android and harmony to work properly with assets, iOS will ignore it. +Needed for Android and HarmonyOS to work properly with assets, iOS will ignore it. ``` （删除） @@ -284,8 +284,8 @@ Needed for Android and harmony to work properly with assets, iOS will ignore it. ## 7. 遗留问题 -- [ ] xxx 问题: [issue#\*\*\*](https://github.com/issue地址1) -- [ ] yyy 问题: [issue#\*\*\*](https://github.com/issue地址2) +- [ ] xxx 问题: [issue#\*\*\*](issue地址1) +- [ ] yyy 问题: [issue#\*\*\*](issue地址2) ## 8. 其他 diff --git a/zh-cn/react-native-linear-gradient.md b/zh-cn/react-native-linear-gradient.md index 4e53443d..6da3ab66 100644 --- a/zh-cn/react-native-linear-gradient.md +++ b/zh-cn/react-native-linear-gradient.md @@ -6,7 +6,7 @@ 本项目基于 [react-native-linear-gradient@3.0.0-alpha.1](https://github.com/react-native-linear-gradient/react-native-linear-gradient) 开发。 -`该第三方库的仓库已迁移至 Gitee，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-linear-gradient，具体版本所属关系如下` +该第三方库的仓库已迁移至 Gitee，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-linear-gradient`，具体版本所属关系如下： | Version | Package Name | Repository | Release | | ------------------------- | ------------------------------------------------- | ------------------ | -------------------------- | @@ -216,4 +216,4 @@ ohpm install ## 6. 开源协议 -本项目基于 [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_react-native-linear-gradient/blob/master/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_react-native-linear-gradient/blob/master/LICENSE)，请自由地享受和参与开源。 -- Gitee