文档模板：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

链接

使用 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" : "./react_native_openharmony"
  }
}

"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.84.1; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;

使用示例

以下代码展示了该库的基本使用场景：

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 < View > (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={() => {
          captureRef(ref).then((res) => {
            console.info(`captureRef: ${res}`);
          });
        }}
      />
      <Button
        title="captureScreen"
        onPress={() => {
          captureScreen().then((res) => {
            console.info(`captureScreen success: ${res}`);
          });
        }}
      />
    </View>
  );
}

属性

options属性详情

接口

遗留问题

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

其他

无

目录结构

/rntpc_react-native-view-shot  # 项目根目录
│  LICENSE
│  OAT.xml
│  package.json
│  README.md
│  README.OpenSource
│  README_en.md
│
├─example
│
├─harmony
│  │  view_shot.har     # 编译后的 HAR 包（HarmonyOS Archive）
│  │
│  └─view_shot          # 鸿蒙适配核心代码
│      │  .gitignore
│      │  build-profile.json5
│      │  hvigorfile.ts
│      │  Index.ets
│      │  oh-package.json5
│      │  ts.ets
│      │
│      └─src
│          └─main
│            │  module.json5
│            │
│            ├─cpp                       # C++ 原生层（新架构 Fabric/TurboModule）
│            │      CMakeLists.txt
│            │      ViewShotPackage.h
│            │      ViewShotTurboModule.cpp
│            │      ViewShotTurboModule.h
│            │
│            ├─ets                      # ArkTS 业务层
│            │      Logger.ts
│            │      ViewShotPackage.ets
│            │      ViewShotTurboModule.ets
│            │
│            └─resources                # 资源文件
│
└─src                                  
    │  index.tsx
    │  RNViewShot.ts
    │  RNViewShot.web.ts
    │
    └─specs
            NativeRNViewShot.ts

贡献代码

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

开源协议

本项目基于 The MIT License (MIT)，请自由使用并参与开源。