captureRef

一个库，允许你捕获 React Native 视图并将其保存为图片。

该库在 Expo SDK 参考中列出，因为它包含在 Expo 中。你可以将你选择的任何库与 开发构建 一起使用。

给定一个视图，captureRef 基本上会对该视图进行屏幕截图并为你返回图片。这对于签名板之类的东西非常有用，用户在其中绘制某些内容，然后你想从中保存图片。

¥Given a view, captureRef will essentially screenshot that view and return an image for you. This is very useful for things like signature pads, where the user draws something, and then you want to save an image from it.

如果你有兴趣从 GLView 拍摄快照，我们建议你使用 GLView 的 takeSnapshotAsync。

¥If you're interested in taking snapshots from the GLView, we recommend you use GLView's takeSnapshotAsync instead.

安装

¥Installation

If you are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

API

import { captureRef } from 'react-native-view-shot';

captureRef(view, options)

给定视图的快照。

¥Snapshots the given view.

参数

¥Arguments

• view (number|ReactElement) -- 要快照的视图的 ref 或 reactTag（也称为节点句柄）。

  ¥view (number|ReactElement) -- The ref or reactTag (also known as node handle) for the view to snapshot.

• 选项（对象）--

  ¥options (object) --

  可选选项的可选地图

  ¥An optional map of optional options

  • 格式（字符串）--"png" | "jpg" | "webm"，默认为 "png"，"webm" 仅在 Android 上支持。

    ¥format (string) -- "png" | "jpg" | "webm", defaults to "png", "webm" supported only on Android.

  • 质量（数字）-- 0 到 1 之间的数字，其中 0 是最差质量，1 是最好质量，默认为 1

    ¥quality (number) -- Number between 0 and 1 where 0 is worst quality and 1 is best, defaults to 1

  • result (string) -- 结果图片的类型。* 'tmpfile' --（默认）返回临时文件 uri。* 'base64' -- Base64 编码图片。* 'data-uri' -- 带 data-uri 前缀的 base64 编码图片。

    ¥result (string) -- The type for the resulting image.

    • 'tmpfile' -- (default) Return a temporary file uri.
    • 'base64' -- base64 encoded image.
    • 'data-uri' -- base64 encoded image with data-uri prefix.

  • height (number) -- 结果的高度（以像素为单位）

    ¥height (number) -- Height of result in pixels

  • width (number) -- 结果的宽度（以像素为单位）

    ¥width (number) -- Width of result in pixels

  • snapshotContentContainer (bool) -- 如果为 true 并且当视图是 ScrollView 时，将评估 "内容容器" 高度而不是容器高度

    ¥snapshotContentContainer (bool) -- if true and when view is a ScrollView, the "content container" height will be evaluated instead of the container height

返回

¥Returns

options 参数中指定格式的图片。

¥An image of the format specified in the options parameter.

注意像素值

¥Note on pixel values

请记住考虑设备 PixelRatio。当你在 UI 中使用像素值时，大多数情况下这些单位是 "逻辑像素" 或 "与设备无关的像素"。对于 PNG 文件等图片，你经常使用 "物理像素"。你可以使用 React Native API 获取设备的 PixelRatio：PixelRatio.get()

¥Remember to take the device PixelRatio into account. When you work with pixel values in a UI, most of the time those units are "logical pixels" or "device-independent pixels". With images like PNG files, you often work with "physical pixels". You can get the PixelRatio of the device using the React Native API: PixelRatio.get()

例如，要保存 1080x1080 的 'FullHD' 图片，你可以执行以下操作：

¥For example, to save a 'FullHD' picture of 1080x1080, you would do something like this:

const targetPixelCount = 1080; // If you want full HD pictures
const pixelRatio = PixelRatio.get(); // The pixel ratio of the device
// pixels * pixelRatio = targetPixelCount, so pixels = targetPixelCount / pixelRatio
const pixels = targetPixelCount / pixelRatio;

const result = await captureRef(this.imageContainer, {
  result: 'tmpfile',
  height: pixels,
  width: pixels,
  quality: 1,
  format: 'png',
});