文档模板：v0.4.2

react-native-view-shot

本项目基于 react-native-view-shot 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-view-shot。 版本所属关系如下：

简介

一个将React Native视图捕获到图像的库。

下载安装

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-view-shot

yarn

yarn add @react-native-ohos/react-native-view-shot

Link

使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/CPF-RN/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。

{
  "overrides": {
    "@rnoh/react-native-openharmony": "^0.72.38" // ohpm online version
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // path to local har package
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // path to source code
  }
}

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",

    "@react-native-ohos/react-native-view-shot": "file:../../node_modules/@react-native-ohos/react-native-view-shot/harmony/view_shot.har"
  }

cd entry
ohpm install

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
+ set(OH_MODULES "${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: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-view-shot/src/main/cpp" ./view-shot)
# RNOH_BEGIN: manual_package_linking_1

add_library(rnoh_app SHARED
    "./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_view_shot)
# RNOH_BEGIN: manual_package_linking_2

#include "RNOH/PackageProvider.h"
#include "SamplePackage.h"
+ #include "ViewShotPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
      std::make_shared<SamplePackage>(ctx),
+     std::make_shared<ViewShotPackage>(ctx)
    };
}

  ...
+ import { ViewShotPackage } from '@react-native-ohos/react-native-view-shot/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new ViewShotPackage(ctx),
  ];
}

运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

本文档内容基于以下环境验证通过：

1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;

权限要求

无需额外权限。

编译运行API要求

API 12 及以上。

使用示例

下面的代码展示了这个库的基本使用场景：

import React from "react";
import { View, Text, Button } from "react-native";
import ViewShot, { captureRef, captureScreen } from "react-native-view-shot";

export function ViewShotDemo() {
  const view = React.useRef(null);
  const ref = React.useRef(null);
  const onCapture = (res) => {
    console.info("onCapture callback");
  };
  const onCaptureFailure = (err) => {
    console.info("onCaptureFailure " + JSON.stringify(err));
  };

  return (
    <View>
      <View
        ref={view}
        collapsable={false}
        style={{ backgroundColor: "#ffffff" }}
      >
        <Text style={{ color: "#000", marginBottom: 30 }}>
          Hello OpenHarmony
        </Text>
        <Text style={{ color: "#000", marginBottom: 30 }}>Hello HarmonyOS</Text>
        <Text style={{ color: "#000", marginBottom: 30 }}>
          Hello HarmonyOS Next.
        </Text>

        <ViewShot
          ref={ref}
          style={{ backgroundColor: "#ffffff" }}
          onCapture={onCapture}
          onCaptureFailure={onCaptureFailure}
          captureMode="mount"
        >
          <Text style={{ color: "#000", marginBottom: 30 }}>Hello World</Text>
        </ViewShot>

      </View>
      <Button
        title="captureRef"
        onPress={() => {
          captureRef(view).then((res) => {
            console.info(`captureRef: ${JSON.stringify(res)}`);
          });
        }}
      />
      <Button
        title="ViewShot capture"
        onPress={() => {
          ref.current?.capture().then((res) => {
            console.info(`ViewShot.capture: ${res}`);
          });
        }}
      />
      <Button
        title="captureScreen"
        onPress={() => {
          captureScreen().then((res) => {
            console.info(`captureScreen success: ${res}`);
          });
        }}
      />
    </View>
  );
}

属性

options属性详情

API

遗留问题

• 被截图组件需要设置背景色，否则截图效果全黑 issues#3。
• 截图配置项 snapshotContentContainer 与 useRenderInContext 暂未实现 issues#34。

其他

无

目录结构

rntpc_react-native-view-shot/
├─src
│  │  index.js                         # JavaScript 入口和 ViewShot 组件
│  │  index.d.ts                       # TypeScript 类型声明
│  │  NativeModule.js                  # 原生模块入口
│  └─ NativeViewShot.js                # TurboModule 规格
└─harmony
   └─view_shot                         # HarmonyOS 适配核心代码
      │  Index.ets                     # HAR 模块入口
      │  ts.ets                        # ArkTS 导出入口
      └─src
         └─main
            ├─cpp                      # C++ TurboModule 注册与绑定
            │  │  CMakeLists.txt
            │  │  ViewShotPackage.h
            │  │  ViewShotTurboModule.cpp
            │  └─ ViewShotTurboModule.h
            └─ets                      # ArkTS 业务实现
               │  Logger.ts
               │  ViewShotPackage.ets
               └─ ViewShotTurboModule.ts

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR 。

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。