react-native 实现将页面导出成图片

生成图片

一. 依赖

https://github.com/gre/react-native-view-shot

yarn add react-native-view-shot

二. 使用步骤

1. 导入组件, 并用它包裹需要导出的区域

import React, { useRef } from "react";
import ViewShot from "react-native-view-shot";

const example = () => {
  const exportRef = useRef();
  return (
    <ViewShot
      ref={exportRef}
      options={{ fileName: "Your-File-Name", format: "jpg", quality: 1 }}
    >
      <Button>123123123213</Button>
      <Text>这是文字</Text>
    </ViewShot>
  );
}

2. 调用方法生成图片

1). 通过 ViewShot 的实例方法
通过该方式导出, 需要将导出配置写在 ViewShot 组件 options 属性中.

exportRef.current.capture().then(uri => {    // uri:生成的图片文件在内存的地址
  console.log("do something with ", uri);
});

2). 通过 react-native-view-shot 提供的api方法

captureRef(exportRef, { format: "jpg", quality: 0.8 })
  .then((uri) => console.log("Image saved to", uri))
  .catch((error) => console.error("Oops, snapshot failed", error));

其他属性
captureMode: emum(“mount”, “continuous”, “update”)
设置后可以自动截图, 但"continuous" 和 "update"仍是试验功能.
onCapture 和 onCaptureFailure
设置 captureMode 后的回调.

坑

1. 部分组件不支持导出, 如视频,GL视图等. 如果View 中包含不支持导出的组件, 可能得到黑色或空白的一张图片, 或 promise 被 reject.
2. 如果没有给需要导出的区域设置背景色, 可能导致文本周围出现黑色背景.

将图片保存

react-native-view-shot只能将图片生成到内存, 如果需要将图片保存到相册或其他文件路径, 需要借助其他依赖.

一. 保存到相册

1. 依赖
   GitHub - react-native-cameraroll/react-native-cameraroll: CameraRoll is a react-native native module
2. 导入和使用

import { CameraRoll } from "@react-native-camera-roll/camera-roll";

CameraRoll
  .save(uriInCache, {type:"photo",album:"QR codes"})
  .then(uriInRoll => {});

3. 坑
   安卓机需要在执行 save 之前先检查 是否拥有读外部存储的权限.

async function hasAndroidPermission() {
  const permission = PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE;
  const hasPermission = await PermissionsAndroid.check(permission);
  if (hasPermission) {
    return true;
  }
  
  const status = await PermissionsAndroid.request(permission);
  return status === 'granted';
}

exportRef.current.capture().then(async (uri) => {
  if (Platform.OS === "android" && !(await hasAndroidPermission())) { return; }
  CameraRoll.save(uri, { type: "photo" }).then((newUri) => {console.log("success:", newUri)});
});

二. 保存到其他文件路径

https://github.com/itinance/react-native-fs