From d34f7f49009227d06e85c61e40ae361e3d38a690 Mon Sep 17 00:00:00 2001 From: splashgalaxy Date: Wed, 13 Aug 2025 17:13:40 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#ICSSSK]=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A00.77=202=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 --- zh-cn/react-native-camera-kit.md | 212 ++++++++++++++++++++++-------- zh-cn/react-native-file-viewer.md | 108 ++++++++++++++- 2 files changed, 264 insertions(+), 56 deletions(-) diff --git a/zh-cn/react-native-camera-kit.md b/zh-cn/react-native-camera-kit.md index 034f57f5..d8e6bbde 100644 --- a/zh-cn/react-native-camera-kit.md +++ b/zh-cn/react-native-camera-kit.md @@ -18,23 +18,37 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： -进入到工程目录并输入以下命令： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 14.0.1 | [@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases) | 0.72 | +| 15.1.1 | [@react-native-ohos/react-native-camera-kit Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +进入到工程目录并输入以下命令： #### npm ```bash +# V14.0.1 npm install @react-native-oh-tpl/react-native-camera-kit + +# V15.1.1 +npm install @react-native-ohos/react-native-camera-kit ``` #### yarn ```bash +# V14.0.1 yarn add @react-native-oh-tpl/react-native-camera-kit + +# V15.1.1 +yarn add @react-native-ohos/react-native-camera-kit ``` @@ -160,6 +174,12 @@ const styles = StyleSheet.create({ ``` +## 使用 Codegen + +> [!TIP] V15.1.1 不需要执行Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + ## Link @@ -191,6 +211,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V14.0.1 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -198,6 +220,15 @@ const styles = StyleSheet.create({ } ``` +- V15.1.1 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-camera-kit": "file:../../node_modules/@react-native-ohos/react-native-camera-kit/harmony/camera_kit.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -211,14 +242,81 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RTNCameraKitView 组件 + +### 3.配置CMakeLists 和引入 CameraKitPackage + +> [!TIP] 若使用的是 14.0.1 版本，请跳过本章 + +打开 `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-camera-kit/src/main/cpp" ./camera-kit) +# 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_kit) +# 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 "CameraKitPackage.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 侧引入 RTNCameraKitView 组件 找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： ```diff ... +// V14.0.1 + import { RTNCameraKitView } from "@react-native-oh-tpl/react-native-camera-kit"; +// V15.1.1 ++ import { RTNCameraKitView } from "@react-native-ohos/react-native-camera-kit"; + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... @@ -240,14 +338,18 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... ``` -### 4.在 ArkTs 侧引入 RTNCameraKitPackage +### 5.在 ArkTs 侧引入 RTNCameraKitPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... +// V14.0.1 + import { RTNCameraKitPackage } from "@react-native-oh-tpl/react-native-camera-kit/ts"; +// V15.1.1 ++ import { RTNCameraKitPackage } from "@react-native-ohos/react-native-camera-kit/ts"; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -275,7 +377,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 14.0.1 | [@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases) | 0.72 | +| 15.1.1 | [@react-native-ohos/react-native-camera-kit Releases]() | 0.77 | ### 权限要求 @@ -353,59 +460,60 @@ ohpm install **Camera**：相机组件 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|-----------------|----------------------|----------|----------|-------------|-------------------| -| ref | Reference on the camera view | Ref | no | All | yes | -| style | Style to apply on the camera view | StyleProp\ | no | All | yes | -| flashMode | Camera flash mode. Default: `auto` | 'on'`/`'off'`/`'auto' | no | All | yes | -| focusMode | Camera focus mode. Default: on | 'on'`/`'off' | no | All | yes | -| zoomMode | Enable the pinch to zoom gesture. Default: on | 'on'`/`'off' | no | All | yes | -| zoom | Control the zoom. Default: 1.0 | Number | no | All | yes | -| maxZoom | Maximum zoom allowed (but not beyond what camera allows). Default: undefined (camera default max) | Number | no | All | yes | -| onZoom | Callback when user makes a pinch gesture, regardless of what the zoom prop was set to. Returned event contains zoom. Ex: onZoom={(e) => console.log(e.nativeEvent.zoom)}. | Function | no | All | yes | -| torchMode | Toggle flash light when camera is active. Default: off | 'on'`/`'off' | no | All | yes | -| cameraType | Choose what camera to use. Default: `CameraType. | 'front'/'back' | no | All | yes | -| onOrientationChange | Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value | Function | no | iOS | yes | -| onError | Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}. | Function | no | Android | yes | -| shutterPhotoSound |Android only. Enable or disable the shutter sound when capturing a photo. Default: `true` | Boolean | no | Android | yes -| ratioOverlay | Show a guiding overlay in the camera preview for the selected ratio. Does not crop image as of v9.0. Example: '16:9' | String | no | iOS | yes | -| ratioOverlayColor | Any color with alpha. Default: '#ffffff77' | String | no | All | yes | -| resetFocusTimeout | Dismiss tap to focus after this many milliseconds. Default 0 (disabled). Example: 5000 is 5 seconds. | Number | no | All | yes | -| resetFocusWhenMotionDetected | Dismiss tap to focus when focus area content changes. Native iOS feature, see documentation: https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624644-subjectareachangemonitoringenabl?language=objc). Default true. | Boolean | no | iOS | no | -| resizeMode | Determines the scaling and cropping behavior of content within the view. cover (resizeAspectFill on iOS) scales the content to fill the view completely, potentially cropping content if its aspect ratio differs from the view. contain (resizeAspect on iOS) scales the content to fit within the view's bounds without cropping, ensuring all content is visible but may introduce letterboxing. Default behavior depends on the specific use case. | 'cover' / 'contain' | no | iOS | no | -| onCaptureButtonPressIn | Callback when iPhone capture button is pressed in. Ex: onCaptureButtonPressIn={() => console.log("volume button pressed in")} | Function | no | iOS | yes | -| onCaptureButtonPressOut | Callback when iPhone capture button is released. Ex: onCaptureButtonPressOut={() => console.log("volume button released")} | Function | no | iOS | no | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------- | ------------------------------------------------------------ | --------------------- | -------- | -------- | ----------------- | +| ref | Reference on the camera view | Ref | no | All | yes | +| style | Style to apply on the camera view | StyleProp\ | no | All | yes | +| flashMode | Camera flash mode. Default: `auto` | 'on'`/`'off'`/`'auto' | no | All | yes | +| focusMode | Camera focus mode. Default: on | 'on'`/`'off' | no | All | yes | +| zoomMode | Enable the pinch to zoom gesture. Default: on | 'on'`/`'off' | no | All | yes | +| zoom | Control the zoom. Default: 1.0 | Number | no | All | yes | +| maxZoom | Maximum zoom allowed (but not beyond what camera allows). Default: undefined (camera default max) | Number | no | All | yes | +| onZoom | Callback when user makes a pinch gesture, regardless of what the zoom prop was set to. Returned event contains zoom. Ex: onZoom={(e) => console.log(e.nativeEvent.zoom)}. | Function | no | All | yes | +| torchMode | Toggle flash light when camera is active. Default: off | 'on'`/`'off' | no | All | yes | +| cameraType | Choose what camera to use. Default: `CameraType. | 'front'/'back' | no | All | yes | +| onOrientationChange | Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value | Function | no | iOS | yes | +| onError | Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}. | Function | no | Android | yes | +| shutterPhotoSound | Android only. Enable or disable the shutter sound when capturing a photo. Default: `true` | Boolean | no | Android | yes | +| ratioOverlay | Show a guiding overlay in the camera preview for the selected ratio. Does not crop image as of v9.0. Example: '16:9' | String | no | iOS | yes | +| ratioOverlayColor | Any color with alpha. Default: '#ffffff77' | String | no | All | yes | +| resetFocusTimeout | Dismiss tap to focus after this many milliseconds. Default 0 (disabled). Example: 5000 is 5 seconds. | Number | no | All | yes | +| resetFocusWhenMotionDetected | Dismiss tap to focus when focus area content changes. Native iOS feature, see documentation: https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624644-subjectareachangemonitoringenabl?language=objc). Default true. | Boolean | no | iOS | no | +| resizeMode | Determines the scaling and cropping behavior of content within the view. cover (resizeAspectFill on iOS) scales the content to fill the view completely, potentially cropping content if its aspect ratio differs from the view. contain (resizeAspect on iOS) scales the content to fit within the view's bounds without cropping, ensuring all content is visible but may introduce letterboxing. Default behavior depends on the specific use case. | 'cover' / 'contain' | no | iOS | no | +| onCaptureButtonPressIn | Callback when iPhone capture button is pressed in. Ex: onCaptureButtonPressIn={() => console.log("volume button pressed in")} | Function | no | iOS | yes | +| onCaptureButtonPressOut | Callback when iPhone capture button is released. Ex: onCaptureButtonPressOut={() => console.log("volume button released")} | Function | no | iOS | no | **ScanCode**：扫码组件 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|-----------------|----------------------|----------|----------|-------------|-------------------| -| ref | Reference on the camera view | Ref | no | All | yes | -| style | Style to apply on the camera view | StyleProp\ | no | All | yes | -| flashMode | Get secret value | 'on'`/`'off'`/`'auto' | no | All | yes | -| zoomMode | Enable the pinch to zoom gesture. Default: on | 'on'`/`'off' | no | All | yes | -| zoom | Control the zoom. Default: 1.0 | Number | no | All | yes | -| maxZoom | Maximum zoom allowed (but not beyond what camera allows). Default: undefined (camera default max) | Number | no | All | yes | -| onZoom | Callback when user makes a pinch gesture, regardless of what the zoom prop was set to. Returned event contains zoom. Ex: onZoom={(e) => console.log(e.nativeEvent.zoom)}. | Function | no | All | yes | -| torchMode | Toggle flash light when camera is active. Default: off | 'on'`/`'off' | no | All | yes | -| cameraType | Choose what camera to use. Default: `CameraType. | 'front'/'back' | no | All | no | -| onOrientationChange | Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value | Function | no | iOS | no | -| onError | Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}. | Function | no | Android | yes | -| resetFocusTimeout | Dismiss tap to focus after this many milliseconds. Default 0 (disabled). Example: 5000 is 5 seconds. | Number | no | All | yes | -| scanThrottleDelay | Duration between scan detection in milliseconds. Default 2000 (2s) | Number | no | All | yes | -| scanBarcode | Enable barcode scanner. Default: `false` | boolean | no | All | yes | -| showFrame | Show frame in barcode scanner. Default: `false` | boolean | no | All | yes | -| laserColor | Color of barcode scanner laser visualization. Default: `red` | string | no | All | yes | -| frameColor | Color of barcode scanner frame visualization. Default: `yellow` | string | no | All | yes | -| onReadCode | Callback when scanner successfully reads barcode. Returned event contains `codeStringValue`. Default: `null`. Ex: `onReadCode={(event) => console.log(event.nativeEvent.codeStringValue)} | Function | no | All | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | --------------------- | -------- | -------- | ----------------- | +| ref | Reference on the camera view | Ref | no | All | yes | +| style | Style to apply on the camera view | StyleProp\ | no | All | yes | +| flashMode | Get secret value | 'on'`/`'off'`/`'auto' | no | All | yes | +| zoomMode | Enable the pinch to zoom gesture. Default: on | 'on'`/`'off' | no | All | yes | +| zoom | Control the zoom. Default: 1.0 | Number | no | All | yes | +| maxZoom | Maximum zoom allowed (but not beyond what camera allows). Default: undefined (camera default max) | Number | no | All | yes | +| onZoom | Callback when user makes a pinch gesture, regardless of what the zoom prop was set to. Returned event contains zoom. Ex: onZoom={(e) => console.log(e.nativeEvent.zoom)}. | Function | no | All | yes | +| torchMode | Toggle flash light when camera is active. Default: off | 'on'`/`'off' | no | All | yes | +| cameraType | Choose what camera to use. Default: `CameraType. | 'front'/'back' | no | All | no | +| onOrientationChange | Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value | Function | no | iOS | no | +| onError | Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}. | Function | no | Android | yes | +| resetFocusTimeout | Dismiss tap to focus after this many milliseconds. Default 0 (disabled). Example: 5000 is 5 seconds. | Number | no | All | yes | +| scanThrottleDelay | Duration between scan detection in milliseconds. Default 2000 (2s) | Number | no | All | yes | +| scanBarcode | Enable barcode scanner. Default: `false` | boolean | no | All | yes | +| showFrame | Show frame in barcode scanner. Default: `false` | boolean | no | All | yes | +| laserColor | Color of barcode scanner laser visualization. Default: `red` | string | no | All | yes | +| frameColor | Color of barcode scanner frame visualization. Default: `yellow` | string | no | All | yes | +| onReadCode | Callback when scanner successfully reads barcode. Returned event contains `codeStringValue`. Default: `null`. Ex: `onReadCode={(event) => console.log(event.nativeEvent.codeStringValue)} | Function | no | All | yes | +| barcodeFrameSize | Frame size of barcode scanner. Default: `{ width: 300, height: 150 }` | object | no | All | yes | ## 静态方法 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----- | ------------------- | ---------- | -------- | -------- | ----------------- | -| capture | Capture image as JPEG. | Promise | No | All | Yes | -| requestDeviceCameraAuthorization | `AVAuthorizationStatusAuthorized` returns `true` otherwise, returns `false` | Promise | No | All | Yes | -| checkDeviceCameraAuthorizationStatus | `AVAuthorizationStatusAuthorized` returns `true` otherwise, returns `false` | Promise | All | Yes |Yes| +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------------ | ------------------------------------------------------------ | -------------------- | -------- | -------- | ----------------- | +| capture | Capture image as JPEG. | Promise | No | All | Yes | +| requestDeviceCameraAuthorization | `AVAuthorizationStatusAuthorized` returns `true` otherwise, returns `false` | Promise | No | All | Yes | +| checkDeviceCameraAuthorizationStatus | `AVAuthorizationStatusAuthorized` returns `true` otherwise, returns `false` | Promise | All | Yes | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-file-viewer.md b/zh-cn/react-native-file-viewer.md index cf05fce4..98a161e7 100644 --- a/zh-cn/react-native-file-viewer.md +++ b/zh-cn/react-native-file-viewer.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-file-viewer Releases](https://github.com/react-native-oh-library/react-native-file-viewer/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.1.6 | [@react-native-oh-tpl/react-native-file-viewer Releases](https://github.com/react-native-oh-library/react-native-file-viewer/releases) | 0.72 | +| 2.1.6 | [@react-native-ohos/react-native-file-viewer Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,13 +33,21 @@ #### **npm** ```bash +# V2.1.6 npm install @react-native-oh-tpl/react-native-file-viewer + +# V2.1.6 +npm install @react-native-ohos/react-native-file-viewer ``` #### **yarn** ```bash +# V2.1.6 yarn add @react-native-oh-tpl/react-native-file-viewer + +# V2.1.6 +yarn add @react-native-ohos/react-native-file-viewer ``` @@ -131,6 +146,8 @@ const styles = StyleSheet.create({ ## 使用 Codegen +> [!TIP] RN0.77工程 不需要执行Codegen + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -163,6 +180,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V2.1.6 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -170,6 +189,15 @@ const styles = StyleSheet.create({ } ``` +- V2.1.6 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-file-viewer": "file:../../node_modules/@react-native-ohos/react-native-file-viewer/harmony/file_viewer.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -183,14 +211,81 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 RNFileViewerTurboModule Package + +### 3.配置CMakeLists 和引入 FileViewerPackage + +> [!TIP] 若使用的是 RN0.72工程，请跳过本章 + +打开 `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-file-viewer/src/main/cpp" ./file-viewer) +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_file_viewer) +# 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 "FileViewerPackage.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 侧引入 RNFileViewerTurboModule Package 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... +// V2.1.6 + import { RNFileViewerPackage } from '@react-native-oh-tpl/react-native-file-viewer/ts'; +// V2.1.6 ++ import { RNFileViewerPackage } from '@react-native-ohos/react-native-file-viewer/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -199,7 +294,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -218,7 +313,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-file-viewer Releases](https://github.com/react-native-oh-library/react-native-file-viewer/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.1.6 | [@react-native-oh-tpl/react-native-file-viewer Releases](https://github.com/react-native-oh-library/react-native-file-viewer/releases) | 0.72 | +| 2.1.6 | [@react-native-ohos/react-native-file-viewer Releases]() | 0.77 | ## API -- Gitee