diff --git a/zh-cn/react-native-contacts.md b/zh-cn/react-native-contacts.md index 67da3312ea38b66aa4b2d8a2c00c197c42123485..7d699340d00c3be7ce37d1af24ea4546cf1f4b89 100644 --- a/zh-cn/react-native-contacts.md +++ b/zh-cn/react-native-contacts.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-contacts Releases](https://github.com/react-native-oh-library/react-native-contacts/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ----------- | ------------------------------------------------------------ | ---------- | +| 7.0.7 | [@react-native-oh-tpl/react-native-contacts Releases](https://github.com/react-native-oh-library/react-native-contacts/releases) | 0.72 | +| 8.0.6 | [@react-native-ohos/react-native-contacts Releases]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: @@ -25,13 +32,21 @@ #### **npm** ```bash +# V7.0.7 npm install @react-native-oh-tpl/react-native-contacts + +# V8.0.6 +npm install @react-native-ohos/react-native-contacts ``` #### **yarn** ```bash +# V7.0.7 yarn add @react-native-oh-tpl/react-native-contacts + +# V8.0.6 +yarn add @react-native-ohos/react-native-contacts ``` @@ -330,6 +345,8 @@ export const ContactsDemo = () => { ## 使用 Codegen +> [!TIP] V8.0.6 不需要执行Codegen + 本库已经适配了 `Codegen` ,在使用前需要主动执行生成三方库桥接代码,详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -362,6 +379,8 @@ export const ContactsDemo = () => { 打开 `entry/oh-package.json5`,添加以下依赖 +- V7.0.7 + ```json "dependencies": { "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", @@ -369,6 +388,15 @@ export const ContactsDemo = () => { } ``` +- V8.0.6 + +```json +"dependencies": { + "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", + "@react-native-ohos/react-native-contacts": "file:../../node_modules/@react-native-ohos/react-native-contacts/harmony/contacts.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行: @@ -382,21 +410,87 @@ ohpm install > [!TIP] 如需使用直接链接源码,请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 ContactsPackage + +### 3.配置CMakeLists 和引入 ContactsPackage + +> [!TIP] 若使用的是 7.0.7 版本,请跳过本章 + +打开 `entry/src/main/cpp/CMakeLists.txt`,添加: + +```cmake +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-contacts/src/main/cpp" ./contacts) +# 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_contacts) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: + +```c++ +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "ContactsPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 ContactsPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: ```diff ... +// V7.0.7 + import {ContactsPackage} from '@react-native-oh-tpl/react-native-contacts/ts'; +// V8.0.6 ++ import {ContactsPackage} from '@react-native-ohos/react-native-contacts/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [new SamplePackage(ctx), + new ContactsPackage(ctx)]; } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -415,7 +509,12 @@ ohpm install 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-contacts Releases](https://github.com/react-native-oh-library/react-native-contacts/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ----------- | ------------------------------------------------------------ | ---------- | +| 7.0.7 | [@react-native-oh-tpl/react-native-contacts Releases](https://github.com/react-native-oh-library/react-native-contacts/releases) | 0.72 | +| 8.0.6 | [@react-native-ohos/react-native-contacts Releases]() | 0.77 | ### 权限要求 diff --git a/zh-cn/react-native-get-random-values.md b/zh-cn/react-native-get-random-values.md index e865e82a9dad2ca7a4ed3ba377e56b74b050bbb3..68bb94fb92ab64a846e9143dcec1eb45a09c5952 100644 --- a/zh-cn/react-native-get-random-values.md +++ b/zh-cn/react-native-get-random-values.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-get-random-values](https://github.com/react-native-oh-library/react-native-get-random-values/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ------------ | ------------------------------------------------------------ | ---------- | +| 1.11.0 | [@react-native-oh-tpl/react-native-get-random-values](https://github.com/react-native-oh-library/react-native-get-random-values/releases) | 0.72 | +| 1.11.1 | [@react-native-ohos/react-native-get-random-values]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: @@ -26,13 +33,21 @@ #### **npm** ```bash +# V1.11.0 npm install @react-native-oh-tpl/react-native-get-random-values + +# V1.11.1 +npm install @react-native-ohos/react-native-get-random-values ``` #### **yarn** ```bash +# V1.11.0 yarn add @react-native-oh-tpl/react-native-get-random-values + +# V1.11.1 +yarn add @react-native-ohos/react-native-get-random-values ``` @@ -78,6 +93,13 @@ export const GetRandomValues = () => { }; ``` +## 使用 Codegen + +> [!TIP] V1.11.1 不需要执行Codegen + +本库已经适配了 `Codegen` ,在使用前需要主动执行生成三方库桥接代码,详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + + ## Link 目前 HarmonyOS 暂不支持 AutoLink,所以 Link 步骤需要手动配置。 @@ -108,6 +130,8 @@ export const GetRandomValues = () => { 打开 `entry/oh-package.json5`,添加以下依赖 +- V1.11.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -115,6 +139,15 @@ export const GetRandomValues = () => { } ``` +- V1.11.1 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-get-random-values": "file:../../node_modules/@react-native-ohos/react-native-get-random-values/harmony/get_random_values.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行: @@ -128,14 +161,79 @@ ohpm install > [!TIP] 如需使用直接链接源码,请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNGetRandomValuesPackage +### 3.配置CMakeLists 和引入 GetRandomValuesPackage + +> [!TIP] 若使用的是 1.11.0 版本,请跳过本章 + +打开 `entry/src/main/cpp/CMakeLists.txt`,添加: + +```cmake +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-get-random-values/src/main/cpp" ./get-random-values) +# 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_get_random_values) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: + +```c++ +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "GetRandomValuesPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 RNGetRandomValuesPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: ```diff ... +// V1.11.0 + import { RNGetRandomValuesPackage } from "@react-native-oh-tpl/react-native-get-random-values/ts"; +// V1.11.1 ++ import { RNGetRandomValuesPackage } from "@react-native-ohos/react-native-get-random-values/ts"; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -144,7 +242,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 diff --git a/zh-cn/react-native-inappbrowser.md b/zh-cn/react-native-inappbrowser.md index dbe4715df4381911141531128a25d110fc5ff4a8..3bcc51afab91c91fdd5eb3d795d9b25d439fbb6f 100644 --- a/zh-cn/react-native-inappbrowser.md +++ b/zh-cn/react-native-inappbrowser.md @@ -16,27 +16,42 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-inappbrowser-reborn Releases](https://github.com/react-native-oh-library/react-native-inappbrowser/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ----------- | ------------------------------------------------------------ | ---------- | +| 3.7.0 | [@react-native-oh-tpl/react-native-inappbrowser-reborn Releases](https://github.com/react-native-oh-library/react-native-inappbrowser/releases) | 0.72 | +| 3.7.1 | [@react-native-ohos/react-native-inappbrowser-reborn Releases]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: #### **npm** -``` +```bash +# V3.7.0 npm install @react-native-oh-tpl/react-native-inappbrowser-reborn + +# V3.7.1 +npm install @react-native-ohos/react-native-inappbrowser-reborn ``` #### **yarn** -``` +```bash +# V3.7.0 yarn add @react-native-oh-tpl/react-native-inappbrowser-reborn + +# V3.7.1 +yarn add @react-native-ohos/react-native-inappbrowser-reborn ``` 下面的代码展示了这个库的基本使用场景: > [!TIP] 使用时 import 的库名不变。 -``` +```tsx import React, {useState } from 'react'; import { StyleSheet, Text, Button ,ScrollView,View,StatusBarStyle,} from 'react-native'; import {InAppBrowser} from 'react-native-inappbrowser-reborn' @@ -257,6 +272,8 @@ export const tryDeepLinking = async () => { ## 使用 Codegen +> [!TIP] V3.7.1 不需要执行Codegen + 本库已经适配了 `Codegen` ,在使用前需要主动执行生成三方库桥接代码,详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -265,7 +282,7 @@ export const tryDeepLinking = async () => { 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony -``` +```json 在工程根目录的 oh-package.json 添加 overrides字段 { ... @@ -279,7 +296,7 @@ export const tryDeepLinking = async () => { **1.在 entry/src/main/ets/entryability 下创建 BrowserManagerAbility.ets** -``` +```ts import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { window } from '@kit.ArkUI'; @@ -327,7 +344,7 @@ export default class BrowserManagerAbility extends UIAbility { **2.在 entry/src/main/module.json5注册BrowserManagerAbility** -``` +```json "abilities":[{ "name": "BrowserManagerAbility", "srcEntry": "./ets/entryability/BrowserManagerAbility.ets", @@ -343,9 +360,13 @@ export default class BrowserManagerAbility extends UIAbility { **3.在 entry/src/main/ets/pages 下创建 BrowserManagerPage.ets** -``` +```ts +// V3.7.0 import { BrowserPage } from '@react-native-oh-tpl/react-native-inappbrowser-reborn/Index' +// V3.7.1 +import { BrowserPage } from '@react-native-ohos/react-native-inappbrowser-reborn/Index' + @Entry @Component struct ChromeTabsManagerPage { @@ -364,7 +385,7 @@ struct ChromeTabsManagerPage { **4.在 entry/src/main/resources/base/profile/main_pages.json 添加配置** -``` +```json { "src": [ "pages/Index", @@ -375,9 +396,13 @@ struct ChromeTabsManagerPage { **5.如果需要预热应用内浏览器客户端,使其启动速度显著加快,可以将以下内容添加到BrowserManagerAbility** -``` +```ts +// V3.7.0 import { RNInAppBrowserModule } from '@react-native-oh-tpl/react-native-inappbrowser-reborn/ts'; +// V3.7.1 +import { RNInAppBrowserModule } from '@react-native-ohos/react-native-inappbrowser-reborn/ts'; + export default class BrowserManagerAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { @@ -400,18 +425,29 @@ export default class BrowserManagerAbility extends UIAbility { 打开 `entry/oh-package.json5`,添加以下依赖 -``` +- V3.7.0 + +```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", "@react-native-oh-tpl/react-native-inappbrowser-reborn": "file:../../node_modules/@react-native-oh-tpl/react-native-inappbrowser-reborn/harmony/inappbrowser.har" } ``` +- V3.7.1 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-inappbrowser-reborn": "file:../../node_modules/@react-native-ohos/react-native-inappbrowser-reborn/harmony/inappbrowser.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行: -``` +```bash cd entry ohpm install ``` @@ -420,14 +456,80 @@ ohpm install > [!TIP] 如需使用直接链接源码,请参考[直接链接源码说明](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNInAppBrowserPackage + +### 3.配置CMakeLists 和引入 InappbrowserRebornPackage + +> [!TIP] 若使用的是 3.7.0 版本,请跳过本章 + +打开 `entry/src/main/cpp/CMakeLists.txt`,添加: + +```cmake +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-inappbrowser-reborn/src/main/cpp" ./inappbrowser-reborn) +# 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_inappbrowser_reborn) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: + +```c++ +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "InappbrowserRebornPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 RNInAppBrowserPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: ```diff ... +// V3.7.0 + import { RNInAppBrowserPackage } from '@react-native-oh-tpl/react-native-inappbrowser-reborn/ts'; +// V3.7.1 ++ import { RNInAppBrowserPackage } from '@react-native-ohos/react-native-inappbrowser-reborn/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -436,13 +538,13 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 或者在终端执行: -``` +```bash cd entry ohpm install ``` @@ -455,7 +557,12 @@ ohpm install 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-inappbrowser-reborn Releases](https://github.com/react-native-oh-library/react-native-inappbrowser/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ----------- | ------------------------------------------------------------ | ---------- | +| 3.7.0 | [@react-native-oh-tpl/react-native-inappbrowser-reborn Releases](https://github.com/react-native-oh-library/react-native-inappbrowser/releases) | 0.72 | +| 3.7.1 | [@react-native-ohos/react-native-inappbrowser-reborn Releases]() | 0.77 | ## API diff --git a/zh-cn/react-native-input-scroll-view.md b/zh-cn/react-native-input-scroll-view.md index 09fc4ae5b96792712c4f2a83ab012d4e9a5adfe3..456290cbe8b3eebc82f74da6f500cd5678bb4b5d 100644 --- a/zh-cn/react-native-input-scroll-view.md +++ b/zh-cn/react-native-input-scroll-view.md @@ -18,20 +18,35 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-input-scroll-view Releases](https://github.com/react-native-oh-library/react-native-input-scroll-view/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ------------ | ------------------------------------------------------------ | ---------- | +| 1.11.0 | [@react-native-oh-tpl/react-native-input-scroll-view Releases](https://github.com/react-native-oh-library/react-native-input-scroll-view/releases) | 0.72 | +| 1.11.1 | [@react-native-ohos/react-native-input-scroll-view Releases]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: #### **npm** ```bash +# V1.11.0 npm install @react-native-oh-tpl/react-native-input-scroll-view + +# V1.11.1 +npm install @react-native-ohos/react-native-input-scroll-view ``` #### **yarn** ```bash +# V1.11.0 yarn add @react-native-oh-tpl/react-native-input-scroll-view + +# V1.11.1 +yarn add @react-native-ohos/react-native-input-scroll-view ``` 下面的代码展示了这个库的基本使用场景: @@ -89,7 +104,12 @@ export default keyboardOffsetInput; 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-input-scroll-view Releases](https://github.com/react-native-oh-library/react-native-input-scroll-view/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ------------ | ------------------------------------------------------------ | ---------- | +| 1.11.0 | [@react-native-oh-tpl/react-native-input-scroll-view Releases](https://github.com/react-native-oh-library/react-native-input-scroll-view/releases) | 0.72 | +| 1.11.1 | [@react-native-ohos/react-native-input-scroll-view Releases]() | 0.77 | ## 属性 diff --git a/zh-cn/react-native-modal-popover.md b/zh-cn/react-native-modal-popover.md index a942adbcc040508fc3dd31a71e79318628048e45..b4019e32b8b86c408684d7e908eeafac91eee49d 100644 --- a/zh-cn/react-native-modal-popover.md +++ b/zh-cn/react-native-modal-popover.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-modal-popover Releases](https://github.com/react-native-oh-library/react-native-modal-popover/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ----------- | ------------------------------------------------------------ | ---------- | +| 2.1.3 | [@react-native-oh-tpl/react-native-modal-popover Releases](https://github.com/react-native-oh-library/react-native-modal-popover/releases) | 0.72 | +| 2.1.4 | [@react-native-ohos/react-native-modal-popover Releases]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: @@ -25,13 +32,21 @@ #### **npm** ```bash +# V2.1.3 npm install @react-native-oh-tpl/react-native-modal-popover + +# V2.1.4 +npm install @react-native-ohos/react-native-modal-popover ``` #### **yarn** ```bash +# V2.1.3 yarn add @react-native-oh-tpl/react-native-modal-popover + +# V2.1.4 +yarn add @react-native-ohos/react-native-modal-popover ``` @@ -266,7 +281,12 @@ export function PopoverCenterExample() { 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-modal-popover Releases](https://github.com/react-native-oh-library/react-native-modal-popover/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ----------- | ------------------------------------------------------------ | ---------- | +| 2.1.3 | [@react-native-oh-tpl/react-native-modal-popover Releases](https://github.com/react-native-oh-library/react-native-modal-popover/releases) | 0.72 | +| 2.1.4 | [@react-native-ohos/react-native-modal-popover Releases]() | 0.77 | ## 属性 diff --git a/zh-cn/react-native-modalbox.md b/zh-cn/react-native-modalbox.md index 12c1bf47c629e58add7f93346aa04cf93bfbb4a6..9d0303c692ac2e737cde38500e7f04ab16238d48 100644 --- a/zh-cn/react-native-modalbox.md +++ b/zh-cn/react-native-modalbox.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-modalbox Releases](https://github.com/react-native-oh-library/react-native-modalbox/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ----------- | ------------------------------------------------------------ | ---------- | +| 2.0.2 | [@react-native-oh-tpl/react-native-modalbox Releases](https://github.com/react-native-oh-library/react-native-modalbox/releases) | 0.72 | +| 2.0.3 | [@react-native-ohos/react-native-modalbox Releases]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: @@ -25,13 +32,21 @@ #### **npm** ```bash +# V2.0.2 npm install @react-native-oh-tpl/react-native-modalbox + +# V2.0.3 +npm install @react-native-ohos/react-native-modalbox ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-modalbox +# V2.0.2 +yarn add @react-native-oh-tpl/react-native-modalbox + +# V2.0.3 +yarn add @react-native-ohos/react-native-modalbox ``` @@ -479,7 +494,12 @@ const styles = StyleSheet.create({ 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-modalbox Releases](https://github.com/react-native-oh-library/react-native-modalbox/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ----------- | ------------------------------------------------------------ | ---------- | +| 2.0.2 | [@react-native-oh-tpl/react-native-modalbox Releases](https://github.com/react-native-oh-library/react-native-modalbox/releases) | 0.72 | +| 2.0.3 | [@react-native-ohos/react-native-modalbox Releases]() | 0.77 | ## 属性 diff --git a/zh-cn/react-native-orientation-locker.md b/zh-cn/react-native-orientation-locker.md index 45394872b7b09543b4fcfd1b16fde8c4f92723b7..02fbc683340b820ba892c7a551d46bb41a9f5863 100644 --- a/zh-cn/react-native-orientation-locker.md +++ b/zh-cn/react-native-orientation-locker.md @@ -16,23 +16,37 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-library/react-native-orientation-locker Releases](https://github.com/react-native-oh-library/react-native-orientation-locker/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息: -进入到工程目录并输入以下命令: +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------------- | ------------------------------------------------------------ | ---------- | +| 1.7.0 | [@react-native-oh-library/react-native-orientation-locker Releases](https://github.com/react-native-oh-library/react-native-orientation-locker/releases) | 0.72 | +| 1.7.1 | [@react-native-ohos/react-native-orientation-locker Releases]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +进入到工程目录并输入以下命令: #### npm ```bash +# V1.7.0 npm install @react-native-oh-tpl/react-native-orientation-locker + +# V1.7.1 +npm install @react-native-ohos/react-native-orientation-locker ``` #### yarn ```bash +# V1.7.0 yarn add @react-native-oh-tpl/react-native-orientation-locker + +# V1.7.1 +yarn add @react-native-ohos/react-native-orientation-locker ``` @@ -210,6 +224,11 @@ const styles = StyleSheet.create({ ``` +## 使用 Codegen + +> [!TIP] V1.7.1 不需要执行Codegen + +本库已经适配了 `Codegen` ,在使用前需要主动执行生成三方库桥接代码,详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -241,6 +260,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`,添加以下依赖 +- V1.7.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -248,6 +269,15 @@ const styles = StyleSheet.create({ } ``` +- V1.7.1 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-orientation-locker":"file:../../node_modules/@react-native-ohos/react-native-orientation-locker/harmony/orientation_locker.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行: @@ -263,6 +293,8 @@ ohpm install 打开 `entry/oh-package.json5`,添加以下依赖 +- V1.7.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -270,6 +302,15 @@ ohpm install } ``` +- V1.7.1 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-orientation-locker":"file:../../node_modules/@react-native-ohos/react-native-orientation-locker/harmony/orientation_locker" + } +``` + 打开终端,执行: ```bash @@ -277,13 +318,80 @@ cd entry ohpm install --no-link ``` -### 3.在 ArkTs 侧引入 RNOrientationLockerPackage + +### 3.配置CMakeLists 和引入 OrientationLockerPackage + +> [!TIP] 若使用的是 1.7.0 版本,请跳过本章 + +打开 `entry/src/main/cpp/CMakeLists.txt`,添加: + +```cmake +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-orientation-locker/src/main/cpp" ./orientation-locker) +# 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_orientation_locker) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: + +```c++ +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "OrientationLockerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 RNOrientationLockerPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: ```diff ... +// V1.7.0 + import { RNOrientationLockerPackage } from '@react-native-oh-tpl/react-native-orientation-locker/ts'; + +// V1.7.1 ++ import { RNOrientationLockerPackage } from '@react-native-ohos/react-native-orientation-locker/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -292,7 +400,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -311,12 +419,17 @@ ohpm install 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-library/react-native-orientation-locker Releases](https://github.com/react-native-oh-library/react-native-orientation-locker/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------------- | ------------------------------------------------------------ | ---------- | +| 1.7.0 | [@react-native-oh-library/react-native-orientation-locker Releases](https://github.com/react-native-oh-library/react-native-orientation-locker/releases) | 0.72 | +| 1.7.1 | [@react-native-ohos/react-native-orientation-locker Releases]() | 0.77 | 本文档内容基于以下版本验证通过: 1. RNOH: 0.72.20; SDK:HarmonyOS NEXT Developer Beta1; IDE:DevEco Studio 5.0.3.200; ROM:3.0.0.18; -2. RNOH: 0.72.33; SDK:OpenHarmony 5.0.0.71(API Version 12 Release); IDE:DevEco Studio 5.0.3.900; ROM:NEXT.0.0.71; +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; ### 权限要求 由于此库获取加速度传感器的数据,使用时需要配置对应的权限,权限需配置在entry/src/main目录下module.json5 中添加如下权限: diff --git a/zh-cn/react-native-print.md b/zh-cn/react-native-print.md index 34f390ffd00c52b6b142dee8623e7920be8a1a6e..5021f78a6c775bc707538a9334b601865cdcea5e 100644 --- a/zh-cn/react-native-print.md +++ b/zh-cn/react-native-print.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-print Releases](https://github.com/react-native-oh-library/react-native-print/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ------------ | ------------------------------------------------------------ | ---------- | +| 0.11.0 | [@react-native-oh-tpl/react-native-print Releases](https://github.com/react-native-oh-library/react-native-print/releases) | 0.72 | +| 0.11.1 | [@react-native-ohos/react-native-print Releases]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: @@ -25,13 +32,21 @@ #### **npm** ```bash +# V0.11.0 npm install @react-native-oh-tpl/react-native-print + +# V0.11.1 +npm install @react-native-ohos/react-native-print ``` #### **yarn** ```bash +# V0.11.0 yarn add @react-native-oh-tpl/react-native-print + +# V0.11.1 +yarn add @react-native-ohos/react-native-print ``` @@ -110,6 +125,8 @@ export default function RNPrint(): JSX.Element { ## 使用 Codegen +[!TIP] V0.11.1 不需要执行Codegen + 本库已经适配了 `Codegen` ,在使用前需要主动执行生成三方库桥接代码,详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -142,6 +159,8 @@ export default function RNPrint(): JSX.Element { 打开 `entry/oh-package.json5`,添加以下依赖 +- V0.11.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -149,6 +168,15 @@ export default function RNPrint(): JSX.Element { } ``` +- V0.11.1 + +```JSON +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-print": "file:../../node_modules/@react-native-ohos/react-native-print/harmony/print.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行: @@ -162,14 +190,80 @@ ohpm install > [!TIP] 如需使用直接链接源码,请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNPrintPackage + +### 3.配置CMakeLists 和引入 PrintPackage + +> [!TIP] 若使用的是 0.11.0 版本,请跳过本章 + +打开 `entry/src/main/cpp/CMakeLists.txt`,添加: + +``` cmake +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-print/src/main/cpp" ./print) +# 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_print) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: + +```c++ +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "PrintPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 RNPrintPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: ```diff ... +// V0.11.0 + import {RNPrintPackage} from '@react-native-oh-tpl/react-native-print/ts'; +// V0.11.1 ++ import {RNPrintPackage} from '@react-native-ohos/react-native-print/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -178,7 +272,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -197,7 +291,12 @@ ohpm install 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-print Releases](https://github.com/react-native-oh-library/react-native-print/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ------------ | ------------------------------------------------------------ | ---------- | +| 0.11.0 | [@react-native-oh-tpl/react-native-print Releases](https://github.com/react-native-oh-library/react-native-print/releases) | 0.72 | +| 0.11.1 | [@react-native-ohos/react-native-print Releases]() | 0.77 | ### 权限要求 diff --git a/zh-cn/react-native-track-player.md b/zh-cn/react-native-track-player.md index 6ca8565b39576671b36253faf9ea446368e8ad82..737015198105371b5a14f33b2c215a5ef47c4f6a 100644 --- a/zh-cn/react-native-track-player.md +++ b/zh-cn/react-native-track-player.md @@ -18,7 +18,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-track-player Releases](https://github.com/react-native-oh-library/react-native-track-player/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.1.2 | [@react-native-oh-tpl/react-native-track-player Releases](https://github.com/react-native-oh-library/react-native-track-player/releases) | 0.72 | +| 4.1.3 | [@react-native-ohos/react-native-track-player Releases]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: @@ -27,13 +34,21 @@ #### **npm** ```bash +# V4.1.2 npm install @react-native-oh-tpl/react-native-track-player + +# V4.1.3 +npm install @react-native-ohos/react-native-track-player ``` #### **yarn** ```bash +# V4.1.2 yarn add @react-native-oh-tpl/react-native-track-player + +# v4.1.3 +yarn add @react-native-ohos/react-native-track-player ``` @@ -133,6 +148,8 @@ export default TrackPlayerDemo; ## 使用 Codegen +> [!TIP] V4.1.3 不需要执行Codegen + 本库已经适配了 `Codegen` ,在使用前需要主动执行生成三方库桥接代码,详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -165,6 +182,8 @@ export default TrackPlayerDemo; 打开 `entry/oh-package.json5`,添加以下依赖 +- V4.1.2 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -172,6 +191,15 @@ export default TrackPlayerDemo; } ``` +- V4.1.3 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-track-player": "file:../../node_modules/@react-native-ohos/react-native-track-player/harmony/track_player.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行: @@ -185,14 +213,80 @@ ohpm install > [!TIP] 如需使用直接链接源码,请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNTrackPlayerPackage + +### 3.配置CMakeLists 和引入 TrackPlayerPackage + +> [!TIP] 若使用的是 4.0.0 版本,请跳过本章 + +打开 `entry/src/main/cpp/CMakeLists.txt`,添加: + +```cmake +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-track-player/src/main/cpp" ./track-player) +# 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_track_player) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: + +```c++ +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "TrackPlayerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 RNTrackPlayerPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: ```diff ... +// V4.1.2 + import { RNTrackPlayerPackage } from "@react-native-oh-tpl/react-native-track-player/ts"; +// V4.1.3 ++ import { RNTrackPlayerPackage } from "@react-native-ohos/react-native-track-player/ts"; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -201,7 +295,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -220,7 +314,12 @@ ohpm install 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-track-player Releases](https://github.com/react-native-oh-library/react-native-track-player/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.1.2 | [@react-native-oh-tpl/react-native-track-player Releases](https://github.com/react-native-oh-library/react-native-track-player/releases) | 0.72 | +| 4.1.3 | [@react-native-ohos/react-native-track-player Releases]() | 0.77 | ### 权限要求 diff --git a/zh-cn/react-native-view-overflow.md b/zh-cn/react-native-view-overflow.md index e9058db86c61f2201484bba15375ae7d9357f2f5..7236533de103fac6424b63115e8a1223bf494d55 100644 --- a/zh-cn/react-native-view-overflow.md +++ b/zh-cn/react-native-view-overflow.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-view-overflow Releases](https://github.com/react-native-oh-library/react-native-view-overflow/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ----------- | ------------------------------------------------------------ | ---------- | +| 0.0.5 | [@react-native-oh-tpl/react-native-view-overflow Releases](https://github.com/react-native-oh-library/react-native-view-overflow/releases) | 0.72 | +| 0.0.6 | [@react-native-ohos/react-native-view-overflow Releases]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令: @@ -26,13 +33,21 @@ #### **npm** ```bash +# V0.0.5 npm install @react-native-oh-tpl/react-native-view-overflow + +# V0.0.6 +npm install @react-native-ohos/react-native-view-overflow ``` #### **yarn** ```bash +# V0.0.5 yarn add @react-native-oh-tpl/react-native-view-overflow + +# V0.0.6 +yarn add @react-native-ohos/react-native-view-overflow ``` @@ -70,7 +85,12 @@ export function ViewOverflowDemo() { 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[react-native-view-overflow Releases](https://github.com/react-native-oh-library/react-native-view-overflow/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ----------- | ------------------------------------------------------------ | ---------- | +| 0.0.5 | [@react-native-oh-tpl/react-native-view-overflow Releases](https://github.com/react-native-oh-library/react-native-view-overflow/releases) | 0.72 | +| 0.0.6 | [@react-native-ohos/react-native-view-overflow Releases]() | 0.77 | ## 属性 [!TIP] 该库作为容器组件使用同View组件,可以让子控件溢出到父布局之外展示的效果;使用公共属性即可,不涉及私有属性及api方法。