From 77120f82f3327bc735a8fbaba90f4d39b1014a4f Mon Sep 17 00:00:00 2001 From: quguiren Date: Thu, 11 Sep 2025 19:33:23 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#ICPDHP]=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A00.77=2027=E4=B8=AA=E4=B8=89=E6=96=B9=E5=BA=93=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: quguiren --- zh-cn/react-native-ble-manager.md | 129 +++++- zh-cn/react-native-blob-util.md | 110 ++++- ...-util\357\274\210nocodegen\357\274\211.md" | 46 +- zh-cn/react-native-cameraroll(nocodegen) .md | 47 +- zh-cn/react-native-cameraroll.md | 104 ++++- ...eact-native-community-segmented-control.md | 85 +++- zh-cn/react-native-community-slider.md | 60 ++- zh-cn/react-native-date-picker(nocodegen).md | 51 ++- zh-cn/react-native-date-picker.md | 112 ++++- zh-cn/react-native-device-info.md | 89 +++- zh-cn/react-native-drawer-layout.md | 117 +++++ zh-cn/react-native-image-crop-picker.md | 12 +- zh-cn/react-native-image-editor.md | 47 +- zh-cn/react-native-maps.md | 224 ++++++---- zh-cn/react-native-masked-view-masked-view.md | 47 +- zh-cn/react-native-popover-view.md | 21 +- zh-cn/react-native-tab-view.md | 122 +++-- zh-cn/react-native-video.md | 66 ++- zh-cn/react-native-vision-camera.md | 96 +++- zh-cn/react-navigation-bottom-tabs.md | 351 ++++++++------- zh-cn/react-navigation-core.md | 280 ++++++------ zh-cn/react-navigation-devtools.md | 177 ++++---- zh-cn/react-navigation-drawer.md | 423 ++++++++++-------- zh-cn/react-navigation-elements.md | 329 +++++++------- zh-cn/react-navigation-material-top-tabs.md | 358 ++++++++------- zh-cn/react-navigation-native-stack.md | 150 ++++--- zh-cn/react-navigation-native.md | 244 +++++----- zh-cn/react-navigation-routers.md | 282 ++++++------ zh-cn/react-navigation-stack.md | 384 ++++++++-------- zh-cn/react-navigation.md | 28 +- 30 files changed, 2978 insertions(+), 1613 deletions(-) create mode 100644 zh-cn/react-native-drawer-layout.md diff --git a/zh-cn/react-native-ble-manager.md b/zh-cn/react-native-ble-manager.md index 77732bf2..896f0195 100644 --- a/zh-cn/react-native-ble-manager.md +++ b/zh-cn/react-native-ble-manager.md @@ -19,7 +19,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-ble-manager Releases](https://github.com/react-native-oh-library/react-native-ble-manager/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 11.5.2 | [@react-native-oh-tpl/react-native-ble-manager Releases](https://github.com/react-native-oh-library/react-native-ble-manager/releases) | 0.72 | +| 12.1.5 | [@react-native-ohos/react-native-ble-manager Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -28,13 +35,21 @@ #### **npm** ```bash +# V11.5.2 npm install @react-native-oh-tpl/react-native-ble-manager + +# V12.1.5 +npm install @react-native-ohos/react-native-ble-manager ``` #### **yarn** ```bash +# V11.5.2 yarn add @react-native-oh-tpl/react-native-ble-manager + +# V12.1.5 +yarn add @react-native-ohos/react-native-ble-manager ``` @@ -43,20 +58,30 @@ yarn add @react-native-oh-tpl/react-native-ble-manager > [!WARNING] 使用时 import 的库名不变。 -```js +```tsx import React, { useState, useEffect } from 'react'; import { StyleSheet, Button, View, Text, NativeEventEmitter, NativeModules, TouchableHighlight, FlatList, Alert } from 'react-native'; import ReactNativeBleManager from 'react-native-ble-manager'; import { Peripheral } from 'react-native-ble-manager'; import { Colors } from 'react-native/Libraries/NewAppScreen'; - +// V11.5.2 begin declare module '@react-native-oh-tpl/react-native-ble-manager' { interface Peripheral { connected?: boolean; connecting?: boolean; } } +// V11.5.2 end + +// V12.1.5 begin +declare module '@react-native-ohos/react-native-ble-manager' { + interface Peripheral { + connected?: boolean; + connecting?: boolean; + } +} +// V12.1.5 end export enum BleState { Unknown = "unknown", @@ -426,6 +451,8 @@ const styles = StyleSheet.create({ ## 使用 Codegen +> [!TIP] V12.1.5 不需要执行 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/codegen.md)。 ## Link @@ -460,6 +487,8 @@ const styles = StyleSheet.create({ >[!TIP] 因本库需要两台手机去进行对端扫描和连接，所以两台手机各装一个har包编译（`ble_managerGatt.har` 和 `ble_managerServers.har`） +- V11.5.2 + 第一台手机：`ble_managerGatt.har` ```json @@ -478,6 +507,26 @@ const styles = StyleSheet.create({ } ``` +- V12.1.5 + +第一台手机：`ble_managerGatt.har` + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-ble-manager": "file:../../node_modules/@react-native-ohos/react-native-ble-manager/harmony/ble_managerGatt.har", + } +``` + +第二台手机：`ble_managerServers.har` + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-ble-manager": "file:../../node_modules/@react-native-ohos/react-native-ble-manager/harmony/ble_managerServers.har", + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -491,14 +540,74 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 BlePackage +### 3.配置 CMakeLists 和引入 BleManagerPackage -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +> [!TIP] 仅 V12.1.5 需要配置 CMakeLists 和引入 BleManagerPackage。 + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-ble-manager/src/main/cpp" ./rnoh_ble_manager) +# 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_ble_manager) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： ```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "BleManagerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 BlePackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```ts ... +// V11.5.2 + import { BlePackage } from '@react-native-oh-tpl/react-native-ble-manager/ts'; +// V12.1.5 ++ import { BlePackage } from '@react-native-ohos/react-native-ble-manager/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -508,7 +617,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -527,7 +636,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-ble-manager Releases](https://github.com/react-native-oh-library/react-native-ble-manager/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 11.5.2 | [@react-native-oh-tpl/react-native-ble-manager Releases](https://github.com/react-native-oh-library/react-native-ble-manager/releases) | 0.72 | +| 12.1.5 | [@react-native-ohos/react-native-ble-manager Releases]() | 0.77 | ### 权限要求 @@ -601,4 +715,3 @@ ohpm install 本项目基于[The MIT License (MIT)](https://github.com/innoveit/react-native-ble-manager/blob/master/LICENSE) ，请自由地享受和参与开源。 - diff --git a/zh-cn/react-native-blob-util.md b/zh-cn/react-native-blob-util.md index 944b47f6..6449da5d 100644 --- a/zh-cn/react-native-blob-util.md +++ b/zh-cn/react-native-blob-util.md @@ -24,7 +24,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-ohos/react-native-blob-util Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-blob-util/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.19.6 | [@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases) | 0.72 | +| 0.22.1 | [@react-native-ohos/react-native-blob-util Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -33,12 +40,20 @@ #### **npm** ```bash +# V0.19.6 +npm install @react-native-oh-tpl/react-native-blob-util + +# V0.22.1 npm install @react-native-ohos/react-native-blob-util ``` #### **yarn** ```bash +# V0.19.6 +yarn add @react-native-oh-tpl/react-native-blob-util + +# V0.22.1 yarn add @react-native-ohos/react-native-blob-util ``` @@ -399,6 +414,8 @@ const styles = StyleSheet.create({ ## 使用 Codegen Version >= @react-native-ohos/react-native-blob-util@0.19.8，已适配codegen-lib生成桥接代码。 +> [!TIP] V0.19.6 需使用 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -434,6 +451,17 @@ Version <= @react-native-oh-tpl/react-native-blob-util@0.19.7@deprecated 暂不 打开 `entry/oh-package.json5`，添加以下依赖 +- V0.19.6 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-blob-util": "file:../../node_modules/@react-native-oh-tpl/react-native-blob-util/harmony/blobUtil.har" + } +``` + +- V0.22.1 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -454,11 +482,78 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 BlobUtilPackage +### 3.配置 CMakeLists 和引入 BlobUtilPackage + +> [!TIP] 仅V0.22.1需要配置 CMakeLists 和引入 BlobUtilPackage。 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: rnoh_blob_util +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-blob-util/src/main/cpp" ./blob-util) + +# RNOH_END: rnoh_blob_util + +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: rnoh_blob_util +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_blob_util) +# RNOH_END: rnoh_blob_util +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "BlobUtilPackage.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 侧引入 BlobUtilPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff +// V0.19.6 ++ import {BlobUtilPackage} from '@react-native-oh-tpl/react-native-blob-util/ts'; + +// V0.22.1 + import {BlobUtilPackage} from '@react-native-ohos/react-native-blob-util/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -468,7 +563,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -487,7 +582,14 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-ohos/react-native-blob-util Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-blob-util/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.19.6 | [@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases) | 0.72 | +| 0.22.1 | [@react-native-ohos/react-native-blob-util Releases]() | 0.77 | + + ## API diff --git "a/zh-cn/react-native-blob-util\357\274\210nocodegen\357\274\211.md" "b/zh-cn/react-native-blob-util\357\274\210nocodegen\357\274\211.md" index 21ff8481..6dea8a1e 100644 --- "a/zh-cn/react-native-blob-util\357\274\210nocodegen\357\274\211.md" +++ "b/zh-cn/react-native-blob-util\357\274\210nocodegen\357\274\211.md" @@ -16,7 +16,12 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases)，并下载适用版本的 tgz 包。 +请到三方库的 Releases 发布地址查看配套的版本信息，并下载适用版本的 tgz 包： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.19.6 | [@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases) | 0.72 | +| 0.22.1 | [@react-native-ohos/react-native-blob-util Releases]() | 0.77 | 进入到工程目录并输入以下命令： @@ -27,13 +32,21 @@ #### **npm** ```bash +# V0.19.6 npm install @react-native-oh-tpl/react-native-blob-util@file:# + +# V0.22.1 +npm install @react-native-ohos/react-native-blob-util@file:# ``` #### **yarn** ```bash +# V0.19.6 yarn add @react-native-oh-tpl/react-native-blob-util@file:# + +# V0.22.1 +yarn add @react-native-ohos/react-native-blob-util@file:# ``` @@ -420,6 +433,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V0.19.6 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -427,6 +442,15 @@ const styles = StyleSheet.create({ } ``` +- V0.22.1 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-blob-util": "file:../../node_modules/@react-native-ohos/react-native-blob-util/harmony/blobUtil.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -463,7 +487,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: rnoh_blob_util add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V0.19.6 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-blob-util/src/main/cpp" ./blob-util) + +# V0.22.1 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-blob-util/src/main/cpp" ./blob-util) + # RNOH_END: rnoh_blob_util file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -495,7 +525,10 @@ std::vector> PackageProvider::getPackages(Package::Cont return { std::make_shared(ctx), std::make_shared(ctx), +# V0.19.6 + std::make_shared(ctx), +# V0.22.1 ++ std::make_shared(ctx), }; } ``` @@ -506,8 +539,12 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... +// V0.19.6 + import {BlobUtilPackage} from '@react-native-oh-tpl/react-native-blob-util/ts'; +// V0.22.1 ++ import {BlobUtilPackage} from '@react-native-ohos/react-native-blob-util/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -535,7 +572,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.19.6 | [@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases) | 0.72 | +| 0.22.1 | [@react-native-ohos/react-native-blob-util Releases]() | 0.77 | ## API diff --git a/zh-cn/react-native-cameraroll(nocodegen) .md b/zh-cn/react-native-cameraroll(nocodegen) .md index fca94c6d..ce2329f4 100644 --- a/zh-cn/react-native-cameraroll(nocodegen) .md +++ b/zh-cn/react-native-cameraroll(nocodegen) .md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-cameraroll Releases](https://github.com/react-native-oh-library/react-native-cameraroll/releases)，并下载适用版本的 tgz 包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 7.8.3 | [@react-native-oh-tpl/react-native-cameraroll Releases](https://github.com/react-native-oh-library/react-native-cameraroll/releases) | 0.72 | +| 7.10.0 | [@react-native-ohos/react-native-cameraroll Releases]() | 0.77 | + +下载适用版本的 tgz 包。 进入到工程目录并输入以下命令： @@ -27,13 +34,21 @@ #### **npm** ```bash +# V7.8.3 npm install @react-native-oh-tpl/camera-roll@file:# + +# V7.10.0 +npm install @react-native-ohos/camera-roll@file:# ``` #### **yarn** ```bash +# V7.8.3 yarn add @react-native-oh-tpl/camera-roll@file:# + +# V7.10.0 +yarn add @react-native-ohos/camera-roll@file:# ``` @@ -94,6 +109,8 @@ export default function App() { 打开 `entry/oh-package.json5`，添加以下依赖 +- V7.8.3 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -102,6 +119,16 @@ export default function App() { } ``` +- V7.10.0 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-ohos/camera-roll": "file:../../node_modules/@react-native-ohos/camera-roll/harmony/camera_roll.har" +} +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -137,7 +164,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V7.8.3 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/camera-roll/src/main/cpp" ./camera-roll) + +# V7.10.0 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/camera-roll/src/main/cpp" ./camera-roll) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -179,8 +212,13 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff import type {RNPackageContext, RNPackage} from 'rnoh/ts'; import {SamplePackage} from 'rnoh-sample-package/ts'; + +// V7.8.3 + import { CameraRollPackage } from '@react-native-oh-tpl/camera-roll/ts'; +// V7.10.0 ++ import { CameraRollPackage } from '@react-native-ohos/camera-roll/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -208,7 +246,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/camera-roll Releases](https://github.com/react-native-oh-library/react-native-cameraroll/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 7.8.3 | [@react-native-oh-tpl/camera-roll Releases](https://github.com/react-native-oh-library/react-native-cameraroll/releases) | 0.72 | +| 7.10.0 | [@react-native-ohos/camera-roll Releases]() | 0.77 | ## 静态方法 diff --git a/zh-cn/react-native-cameraroll.md b/zh-cn/react-native-cameraroll.md index 19a5525e..46f9a90b 100644 --- a/zh-cn/react-native-cameraroll.md +++ b/zh-cn/react-native-cameraroll.md @@ -23,7 +23,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-ohos/react-native-cameraroll Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-cameraroll/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 7.8.3 | [@react-native-oh-tpl/react-native-cameraroll Releases](https://github.com/react-native-oh-library/react-native-cameraroll/releases) | 0.72 | +| 7.10.0 | [@react-native-ohos/react-native-cameraroll Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -32,12 +39,20 @@ #### **npm** ```bash +# V7.8.3 +npm install @react-native-oh-tpl/camera-roll + +# V7.10.0 npm install @react-native-ohos/camera-roll ``` #### **yarn** ```bash +# V7.8.3 +yarn add @react-native-oh-tpl/camera-roll + +# V7.10.0 yarn add @react-native-ohos/camera-roll ``` @@ -108,6 +123,17 @@ Version <= @react-native-oh-tpl/camera-roll@7.8.3-0.1.5@deprecated 暂不支持 打开 `entry/oh-package.json5`，添加以下依赖 +- V7.8.3 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/camera-roll": "file:../../node_modules/@react-native-oh-tpl/camera-roll/harmony/camera_roll.har" + } +``` + +- V7.10.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -128,12 +154,77 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 CameraRollPackage +### 3.配置 CMakeLists 和引入 CameraRollPackage + +> [!TIP] 仅V7.10.0需要配置 CMakeLists 和引入 CameraRollPackage。 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/camera-roll/src/main/cpp" ./camera-roll) + +# 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_camera_roll) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "CameraRollPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 CameraRollPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... +// V7.8.3 ++ import { CameraRollPackage } from '@react-native-oh-tpl/camera-roll/ts'; + +// V7.10.0 + import { CameraRollPackage } from '@react-native-ohos/camera-roll/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -144,7 +235,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -163,7 +254,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-ohos/camera-roll Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-cameraroll/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 7.8.3 | [@react-native-oh-tpl/camera-roll Releases](https://github.com/react-native-oh-library/react-native-cameraroll/releases) | 0.72 | +| 7.10.0 | [@react-native-ohos/camera-roll Releases]() | 0.77 | ## 静态方法 diff --git a/zh-cn/react-native-community-segmented-control.md b/zh-cn/react-native-community-segmented-control.md index 8fb7f484..e47d4ae5 100644 --- a/zh-cn/react-native-community-segmented-control.md +++ b/zh-cn/react-native-community-segmented-control.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/segmented-control Releases](https://github.com/react-native-oh-library/segmented-control/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.5.2 | [@react-native-oh-tpl/segmented-control Releases](https://github.com/react-native-oh-library/segmented-control/releases) | 0.72 | +| 2.5.7 | [@react-native-ohos/segmented-control Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -25,13 +32,21 @@ #### **npm** ```bash +# V2.5.2 npm install @react-native-oh-tpl/segmented-control + +# V2.5.7 +npm install @react-native-ohos/segmented-control ``` #### **yarn** ```bash +# V2.5.2 yarn add @react-native-oh-tpl/segmented-control + +# V2.5.7 +yarn add @react-native-ohos/segmented-control ``` @@ -40,6 +55,8 @@ yarn add @react-native-oh-tpl/segmented-control > [!WARNING] 使用时 import 的库名不变。 +- V2.5.2 示例 + ```js import React, { useState, useEffect } from "react"; import SegmentedControl from "@react-native-segmented-control/segmented-control"; @@ -59,17 +76,63 @@ export const MSegmentedControl: React.FC = (): JSX.Element => { />; } ``` - + +- V2.5.7 示例 + +```js +import React, { useState } from "react"; +import { View, StyleSheet, Text } from "react-native"; +import SegmentedControl from "@react-native-segmented-control/segmented-control"; + +export const MSegmentedControl: React.FC = (): JSX.Element => { + const [selectedIndex, setSelectedIndex] = useState(0); + const testIDS = ['btn-1', 'btn-2']; + + return ( + + { + setSelectedIndex(event.nativeEvent.selectedSegmentIndex); + }} + testIDS={testIDS} + style={styles.segmentedControl} + /> + + 当前选中 testID: {testIDS[selectedIndex]} + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + }, + segmentedControl: { + width: "60%", + height: 40, + }, +}); +``` + + + ## 约束与限制 ### 兼容性 -本文档内容基于以下版本验证通过： +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： -1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; -2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; -3. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.29(SP1) ; IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25; -4. RNOH：0.72.29; SDK：HarmonyOS NEXT Developer Beta6 5.0.0.61; IDE：DevEco Studio 5.0.3.706; ROM：3.0.0.61; +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.5.2 | [@react-native-oh-tpl/segmented-control Releases](https://github.com/react-native-oh-library/segmented-control/releases) | 0.72 | +| 2.5.7 | [@react-native-ohos/segmented-control Releases]() | 0.77 | ## 属性 @@ -82,7 +145,7 @@ export const MSegmentedControl: React.FC = (): JSX.Element => { | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | | enabled | If false the user won't be able to interact with the control. Default value is true. | boolean | No | All | Yes | -| momentary | If true, then selecting a segment won't persist visually. The onValueChange callback will still work as expected. | boolean | No | iOS | Yes | +| momentary | If true, then selecting a segment won't persist visually. The onValueChange callback will still work as expected. | boolean | No | iOS | Yes | | onChange | Callback that is called when the user taps a segment; passes the event as an argument | function | No | All | Yes | | onValueChange | Callback that is called when the user taps a segment; passes the segment's value as an argument | function | No | All | Yes | | selectedIndex | The index in props.values of the segment to be (pre)selected. | number | No | All | Yes | @@ -90,9 +153,11 @@ export const MSegmentedControl: React.FC = (): JSX.Element => { | backgroundColor | Background color color of the control. | string | No | All | Yes | | values | The labels for the control's segment buttons, in order. | string | Yes | All | Yes | | appearance | Overrides the control's appearance irrespective of the OS theme | 'dark', 'light' | No | All | Yes | -| fontStyle | An object container,color: color of segment;fontSize: font-size of segment text;fontFamily: font-family of segment text;fontWeight: font-weight of segment text | object | No | All | Yes | -| activeFontStyle | An object container,color: overrides color of selected segment text;fontSize: overrides font-size of selected segment text;fontFamily: overrides font-family of selected segment text;fontWeight: overrides font-weight of selected segment text | object | No | All | Yes | +| fontStyle | An object container,color: color of segment;fontSize: font-size of segment text;fontFamily: font-family of segment text;fontWeight: font-weight of segment text | object | No | All | Yes | +| activeFontStyle | An object container,color: overrides color of selected segment text;fontSize: overrides font-size of selected segment text;fontFamily: overrides font-family of selected segment text;fontWeight: overrides font-weight of selected segment text | object | No | All | Yes | | tabStyle | Styles the clickable surface which is responsible to change tabs | object | No | Android, Web | Yes | +| testIDS2.5.7+ | array testID to each segment button | $ReadOnlyArray | Yes | All | Yes | +| sliderStyle2.5.7+ | Style properties for the slider component (Animated.View) | object | No | Android, Web | Yes | ## 遗留问题 - [X] @react-native-segmented-control/segmented-control 的fontFamily属性未实现 HarmonyOS 化: [issue#858](https://github.com/react-native-segmented-control/segmented-control/issues/858) diff --git a/zh-cn/react-native-community-slider.md b/zh-cn/react-native-community-slider.md index 8dc5556e..3e53e043 100644 --- a/zh-cn/react-native-community-slider.md +++ b/zh-cn/react-native-community-slider.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/slider Releases](https://github.com/react-native-oh-library/react-native-slider/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.4.3 | [@react-native-oh-tpl/slider Releases](https://github.com/react-native-oh-library/react-native-slider/releases) | 0.72 | +| 5.0.0 | [@react-native-ohos/slider Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -25,13 +32,21 @@ #### **npm** ```bash +# V4.4.3 npm install @react-native-oh-tpl/slider + +# V5.0.0 +npm install @react-native-ohos/slider ``` #### **yarn** ```bash +# V4.4.3 yarn add @react-native-oh-tpl/slider + +# V5.0.0 +yarn add @react-native-ohos/slider ``` @@ -93,6 +108,8 @@ export default function SliderExample() { 打开 `entry/oh-package.json5`，添加以下依赖 +- V4.4.3 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -101,6 +118,16 @@ export default function SliderExample() { } ``` +- V5.0.0 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-ohos/slider": "file:../../node_modules/@react-native-ohos/slider/harmony/slider.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -129,7 +156,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: add_package_subdirectories add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V4.4.3 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/slider/src/main/cpp" ./slider) + +# V5.0.0 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/slider/src/main/cpp" ./slider) + # RNOH_END: add_package_subdirectories add_library(rnoh_app SHARED @@ -168,8 +201,12 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... +// V4.4.3 + import { RNCSlider, SLIDER_TYPE } from "@react-native-oh-tpl/slider" +// V5.0.0 ++ import { RNCSlider, SLIDER_TYPE } from "@react-native-ohos/slider" + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... @@ -213,7 +250,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/slider Releases](https://github.com/react-native-oh-library/react-native-slider/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.4.3 | [@react-native-oh-tpl/slider Releases](https://github.com/react-native-oh-library/react-native-slider/releases) | 0.72 | +| 5.0.0 | [@react-native-ohos/slider Releases]() | 0.77 | ## 属性 @@ -246,6 +288,20 @@ ohpm install | `trackImage` | Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track. | Image
.propTypes
.source | No | iOS | no | | `ref` | Reference object. | MutableRefObject | No | web | no | | `View` | [Inherited `View` props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props) | | | | | +| StepMarker5.0.0+ | Component to be rendered for each step on the track,
with the possibility to change the styling, when thumb is at that given step. | FC\ | No | iOS, Android, Windows | yes | +| renderStepNumber5.0.0+ | Turns on the displaying of numbers of steps.
Numbers of steps are displayed under the track. | bool | No | iOS, Android, Windows | yes | + +## StepMarker5.0.0+ + +Your custom component rendered for every step on the Slider, both the thumb and the rest of steps along the Slider's whole length. This StepMarker prop accepts your custom component and provides it with the following parameters: + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------ | ------------------------------------------------------------ | ------- | -------- | --------------------- | ----------------- | +| stepMarked | Indicates whether that custom step is the one that the thum is currently on. If user drags or clicks on that step, thumb will be moved there and the stepMarked parameter will be set to true. Use it, to differentiate between rendering your custom thumb component, or your custom step marker. | boolean | No | iOS, Android, Windows | yes | +| currentValue | Contains the `number` type saying at which value of the Slider the thumb currently is. Use it, for example, to render the Slider value on every step marker, or to render different step marker's variant depending on the Thumb position. | number | No | iOS, Android, Windows | yes | +| index | Contains the index at which this exact instantiation of your custom step marker was rendered at. Use it if you would like to render step number within the step marker, or, for example, if you want to render many variants of step marker depending on their positions along the Slider's width. | number | No | iOS, Android, Windows | yes | +| min | Minimum value of the Slider. It is equal to minimumValue and has the same default if not set. | number | No | iOS, Android, Windows | yes | +| max | Maximum value of the Slider. It is equal to maximumValue and has the same default if not set. | number | No | iOS, Android, Windows | yes | ## 遗留问题 diff --git a/zh-cn/react-native-date-picker(nocodegen).md b/zh-cn/react-native-date-picker(nocodegen).md index 20d02ddd..014c51b6 100644 --- a/zh-cn/react-native-date-picker(nocodegen).md +++ b/zh-cn/react-native-date-picker(nocodegen).md @@ -19,7 +19,12 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-date-picker Releases](https://github.com/react-native-oh-library/react-native-date-picker/releases)，并下载适用版本的 tgz 包。 +请到三方库的 Releases 发布地址查看配套的版本信息，并下载适用版本的 tgz 包： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 5.0.5 | [@react-native-oh-tpl/react-native-date-picker Releases](https://github.com/react-native-oh-library/react-native-date-picker/releases) | 0.72 | +| 5.0.13 | [@react-native-ohos/react-native-date-picker Releases]() | 0.77 | 进入到工程目录并输入以下命令： @@ -30,13 +35,21 @@ #### **npm** ```bash +# V5.0.5 npm install @react-native-oh-tpl/react-native-date-picker@file:# + +# V5.0.13 +npm install @react-native-ohos/react-native-date-picker@file:# ``` #### **yarn** ```bash +# V5.0.5 yarn add @react-native-oh-tpl/react-native-date-picker@file:# + +# V5.0.13 +yarn add @react-native-ohos/react-native-date-picker@file:# ``` @@ -74,7 +87,6 @@ export default () => { ) } - ``` ## Link @@ -107,6 +119,8 @@ export default () => { 打开 `entry/oh-package.json5`，添加以下依赖 +- V5.0.5 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -114,6 +128,15 @@ export default () => { } ``` +- V5.0.13 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-date-picker": "file:../../node_modules/@react-native-ohos/react-native-date-picker/harmony/date_picker.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -144,7 +167,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: add_package_subdirectories add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V5.0.5 + add_subdirectory("${OH_MODULE}/@react-native-oh-tpl/react-native-date-picker/src/main/cpp" ./date_picker) + +# V5.0.13 ++ add_subdirectory("${OH_MODULE}/@react-native-ohos/react-native-date-picker/src/main/cpp" ./date_picker) + # RNOH_END: add_package_subdirectories add_library(rnoh_app SHARED @@ -182,8 +211,12 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... +// V5.0.5 + import { RNDatePicker } from "@react-native-oh-tpl/react-native-date-picker" +// V5.0.13 ++ import { RNDatePicker } from "@react-native-ohos/react-native-date-picker" + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... @@ -218,8 +251,12 @@ const arkTsComponentNames: Array = [ ```diff import type { RNPackageContext, RNPackage } from 'rnoh/ts'; ... +// V5.0.5 + import { RNDatePickerPackage} from '@react-native-oh-tpl/react-native-date-picker/ts'; +// V5.0.13 ++ import { RNDatePickerPackage} from '@react-native-ohos/react-native-date-picker/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -244,10 +281,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-date-picker Releases](https://github.com/react-native-oh-library/react-native-date-picker/releases) - - +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 5.0.5 | [@react-native-oh-tpl/react-native-date-picker Releases](https://github.com/react-native-oh-library/react-native-date-picker/releases) | 0.72 | +| 5.0.13 | [@react-native-ohos/react-native-date-picker Releases]() | 0.77 | ## 属性 @@ -280,7 +319,7 @@ ohpm install ## 遗留问题 - + - [ ] 不支持属性confirmText。[issue#11](https://github.com/react-native-oh-library/react-native-date-picker/issues/11) - [ ] 不支持属性cancelText。[issue#12](https://github.com/react-native-oh-library/react-native-date-picker/issues/12) - [ ] 不支持属性theme。[issue#13](https://github.com/react-native-oh-library/react-native-date-picker/issues/13) diff --git a/zh-cn/react-native-date-picker.md b/zh-cn/react-native-date-picker.md index bfc63e14..379a20ff 100644 --- a/zh-cn/react-native-date-picker.md +++ b/zh-cn/react-native-date-picker.md @@ -19,7 +19,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-date-picker Releases](https://github.com/react-native-oh-library/react-native-date-picker/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 5.0.5 | [@react-native-oh-tpl/react-native-date-picker Releases](https://github.com/react-native-oh-library/react-native-date-picker/releases) | 0.72 | +| 5.0.13 | [@react-native-ohos/react-native-date-picker Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -28,13 +35,21 @@ #### **npm** ```bash +# V5.0.5 npm install @react-native-oh-tpl/react-native-date-picker + +# V5.0.13 +npm install @react-native-ohos/react-native-date-picker ``` #### **yarn** ```bash +# V5.0.5 yarn add @react-native-oh-tpl/react-native-date-picker + +# V5.0.13 +yarn add @react-native-ohos/react-native-date-picker ``` @@ -77,6 +92,8 @@ export default () => { ## 使用 Codegen +> [!TIP] V5.0.13 不需要使用Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -109,6 +126,8 @@ export default () => { 打开 `entry/oh-package.json5`，添加以下依赖 +- V5.0.5 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -116,6 +135,15 @@ export default () => { } ``` +- V5.0.13 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-date-picker": "file:../../node_modules/@react-native-ohos/react-native-date-picker/harmony/date_picker.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -130,13 +158,72 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNDatePicker 组件 + + +### 3.配置 CMakeLists 和引入 RNDatePickerPackage + +> [!TIP] 仅V5.0.13 需要配置CMakeLists 和引入 RNDatePickerPackage。 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +txtproject(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") ++ set(OH_MODULE "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: add_package_subdirectories +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + ++ add_subdirectory("${OH_MODULE}/@react-native-ohos/react-native-date-picker/src/main/cpp" ./date_picker) + +# RNOH_END: add_package_subdirectories + +add_library(rnoh_app SHARED + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) + +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: link_packages +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_date_picker) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "DatePickerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4.在 ArkTs 侧引入 RNDatePicker 组件 + 找到 **function buildCustomRNComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： ```diff ... +// V5.0.5 + import { RNDatePicker } from "@react-native-oh-tpl/react-native-date-picker" +// V5.0.13 ++ import { RNDatePicker } from "@react-native-ohos/react-native-date-picker" + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... @@ -150,6 +237,7 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) { } ... ``` + > [!TIP] 本库使用了混合方案，需要添加组件名。 在entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets 找到常量 arkTsComponentNames 在其数组里添加组件名 @@ -164,14 +252,20 @@ const arkTsComponentNames: Array = [ ]; ``` -### 4. 在 ArkTs 侧引入 RNDatePickerPackage + + +### 5. 在 ArkTs 侧引入 RNDatePickerPackage Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... +// V5.0.5 + import {RNDatePickerPackage} from '@react-native-oh-tpl/react-native-date-picker/ts'; +// V5.0.13 ++ import {RNDatePickerPackage} from '@react-native-ohos/react-native-date-picker/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -179,7 +273,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { ]; } ``` -### 5.运行 +### 6.运行 点击右上角的 `sync` 按钮 @@ -196,10 +290,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-date-picker Releases](https://github.com/react-native-oh-library/react-native-date-picker/releases) - - +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 5.0.5 | [@react-native-oh-tpl/react-native-date-picker Releases](https://github.com/react-native-oh-library/react-native-date-picker/releases) | 0.72 | +| 5.0.13 | [@react-native-ohos/react-native-date-picker Releases]() | 0.77 | ## 属性 @@ -232,7 +328,7 @@ ohpm install ## 遗留问题 - + - [ ] 不支持属性confirmText。[issue#11](https://github.com/react-native-oh-library/react-native-date-picker/issues/11) - [ ] 不支持属性cancelText。[issue#12](https://github.com/react-native-oh-library/react-native-date-picker/issues/12) - [ ] 不支持属性theme。[issue#13](https://github.com/react-native-oh-library/react-native-date-picker/issues/13) diff --git a/zh-cn/react-native-device-info.md b/zh-cn/react-native-device-info.md index 76e15681..4bac2bb5 100644 --- a/zh-cn/react-native-device-info.md +++ b/zh-cn/react-native-device-info.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-device-info Releases](https://github.com/react-native-oh-library/react-native-device-info/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 11.1.0 | [@react-native-oh-tpl/react-native-device-info Releases](https://github.com/react-native-oh-library/react-native-device-info/releases) | 0.72 | +| 14.0.4 | [@react-native-ohos/react-native-device-info Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,13 +33,21 @@ #### **npm** ```bash +# V11.1.0 npm install @react-native-oh-tpl/react-native-device-info + +# V14.0.4 +npm install @react-native-ohos/react-native-device-info ``` #### **yarn** ```bash +# V11.1.0 yarn add @react-native-oh-tpl/react-native-device-info + +# V14.0.4 +yarn add @react-native-ohos/react-native-device-info ``` @@ -151,6 +166,8 @@ export default App; ``` ## 使用 Codegen +> [!TIP] V14.0.4 不需要执行 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -183,6 +200,8 @@ export default App; 打开 `entry/oh-package.json5`，添加以下依赖 +- V11.1.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -190,6 +209,15 @@ export default App; } ``` +- V14.0.4 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-device-info": "file:../../node_modules/@react-native-ohos/react-native-device-info/harmony/device_info.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -203,15 +231,61 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +### 3.配置 CMakeLists + +> [!TIP] 仅V14.0.4 配置 CMakeLists。 -### 3.在 ArkTs 侧引入 RNDeviceInfoPackage +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_CXX_STANDARD 17) +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../oh_modules/@rnoh/react-native-openharmony/src/main/cpp") ++ set(REACT_NATIVE_DEVICE_INFO_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@react-native-ohos/react-native-device-info/src/main/cpp") +set(WITH_HITRACE_SYSTRACE 1) +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) ++ add_subdirectory("${REACT_NATIVE_DEVICE_INFO_CPP_DIR}" ./device_info) + +add_library(rnoh_app SHARED + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) ++ target_link_libraries(rnoh_app PUBLIC device_info) +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" ++ #include "RNDeviceInfoPackage.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 侧引入 RNDeviceInfoPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... +// V11.1.0 + import {RNDeviceInfoPackage} from '@react-native-oh-tpl/react-native-device-info/ts'; +// V14.0.4 ++ import {RNDeviceInfoPackage} from '@react-native-ohos/react-native-device-info/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -220,7 +294,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -239,7 +313,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-device-info Releases](https://github.com/react-native-oh-library/react-native-device-info/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 11.1.0 | [@react-native-oh-tpl/react-native-device-info Releases](https://github.com/react-native-oh-library/react-native-device-info/releases) | 0.72 | +| 14.0.4 | [@react-native-ohos/react-native-device-info Releases]() | 0.77 | ### 权限要求 @@ -363,6 +442,8 @@ ohpm install | supportedAbis | device support Abis | Promise | No | IOS/Android/Windows/visoinOS | yes| | syncUniqueId | This method is intended for iOS,This synchronizes uniqueId with IDFV or sets new a random string,On iOS it uses the DeviceUID uid identifier. On other platforms it just call getUniqueId() in this module. | Promise | No | IOS/visionOS | no | | getSupportedMediaTypeList | This method gets the list of supported media codecs. | Promise | No | IOS/Android | yes | +| getStartupTime14.0.4+ | Gets the time at which the current app process was started, in milliseconds. | Promise\ | Yes | iOS/Android/visionOS | yes | +| getStartupTimeSync14.0.4+ | | number | Yes | iOS/Android/visionOS | yes | ## 遗留问题 diff --git a/zh-cn/react-native-drawer-layout.md b/zh-cn/react-native-drawer-layout.md new file mode 100644 index 00000000..9cc2bc14 --- /dev/null +++ b/zh-cn/react-native-drawer-layout.md @@ -0,0 +1,117 @@ +> 模板版本：v0.2.2 + +

+

react-native-drawer-layout

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [GitCode 地址](https://gitcode.com/openharmony-sig/rntpc_react-navigation/tree/master/packages/react-native-drawer-layout) + +## 安装与使用 + +进入到工程目录并输入以下命令： + +#### **npm** + +```bash +npm install @react-native-ohos/react-native-drawer-layout +``` + +#### **yarn** + +```bash +yarn add @react-native-ohos/react-native-drawer-layout +``` + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import * as React from 'react'; +import { Text, Button } from 'react-native'; +import { Drawer } from 'react-native-drawer-layout'; + +export default function DrawerExample() { + const [open, setOpen] = React.useState(false); + + return ( + setOpen(true)} + onClose={() => setOpen(false)} + renderDrawerContent={() => { + return Drawer content; + }} + > +