From 65a2e33e8dcada0c1cfb5ae1f06d7b56be962228 Mon Sep 17 00:00:00 2001 From: splashgalaxy Date: Tue, 12 Aug 2025 15:55:49 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:#ICRWEZ]=20=E6=B7=BB=E5=8A=A00.?= =?UTF-8?q?77=2010=E4=B8=AA=E4=B8=89=E6=96=B9=E5=BA=93=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-contacts.md | 39 ++++++++- zh-cn/react-native-get-random-values.md | 32 ++++++- zh-cn/react-native-inappbrowser.md | 71 ++++++++++++--- zh-cn/react-native-input-scroll-view.md | 24 ++++- zh-cn/react-native-modal-popover.md | 24 ++++- zh-cn/react-native-modalbox.md | 26 +++++- zh-cn/react-native-orientation-locker.md | 54 +++++++++++- zh-cn/react-native-print.md | 107 ++++++++++++++++++++++- zh-cn/react-native-track-player.md | 39 ++++++++- zh-cn/react-native-view-overflow.md | 24 ++++- 10 files changed, 404 insertions(+), 36 deletions(-) diff --git a/zh-cn/react-native-contacts.md b/zh-cn/react-native-contacts.md index 67da3312..3f07312c 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 ``` @@ -362,6 +377,8 @@ export const ContactsDemo = () => { 打开 `entry/oh-package.json5`,添加以下依赖 +- V7.0.7 + ```json "dependencies": { "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", @@ -369,6 +386,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` 按钮 或者在终端执行: @@ -388,8 +414,12 @@ ohpm install ```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)]; @@ -415,7 +445,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 e865e82a..a1dc5e1c 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 ``` @@ -108,6 +123,8 @@ export const GetRandomValues = () => { 打开 `entry/oh-package.json5`,添加以下依赖 +- V1.11.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -115,6 +132,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` 按钮 或者在终端执行: @@ -134,8 +160,12 @@ ohpm install ```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), diff --git a/zh-cn/react-native-inappbrowser.md b/zh-cn/react-native-inappbrowser.md index dbe4715d..600e81c0 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' @@ -265,7 +280,7 @@ export const tryDeepLinking = async () => { 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony -``` +```json 在工程根目录的 oh-package.json 添加 overrides字段 { ... @@ -279,7 +294,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 +342,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 +358,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 +383,7 @@ struct ChromeTabsManagerPage { **4.在 entry/src/main/resources/base/profile/main_pages.json 添加配置** -``` +```json { "src": [ "pages/Index", @@ -375,9 +394,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 +423,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 ``` @@ -426,8 +460,12 @@ ohpm install ```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), @@ -442,7 +480,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { 或者在终端执行: -``` +```bash cd entry ohpm install ``` @@ -455,7 +493,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 09fc4ae5..456290cb 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 a942adbc..b4019e32 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 12c1bf47..9d0303c6 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 45394872..7b0a8188 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 ``` @@ -241,6 +255,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`,添加以下依赖 +- V1.7.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -248,6 +264,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 +288,8 @@ ohpm install 打开 `entry/oh-package.json5`,添加以下依赖 +- V1.7.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -270,6 +297,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 @@ -283,7 +319,12 @@ ohpm install --no-link ```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), @@ -311,12 +352,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 34f390ff..5021f78a 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 6ca8565b..c1cc6806 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 ``` @@ -165,6 +180,8 @@ export default TrackPlayerDemo; 打开 `entry/oh-package.json5`,添加以下依赖 +- V4.1.2 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -172,6 +189,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` 按钮 或者在终端执行: @@ -191,8 +217,12 @@ ohpm install ```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), @@ -220,7 +250,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 e9058db8..7236533d 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方法。 -- Gitee