react-native-view-shot

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

给定一个视图，captureRef 本质上会对该视图进行截图并返回一张图片给你。这对于签名板之类的场景非常有用，用户在上面绘制一些内容，然后你希望将其保存为图片。

如果你有兴趣从 GLView 中获取快照，我们建议你改用 GLView 的 takeSnapshotAsync。

安装

If you are installing this in an existing React Native app, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

关于像素值的说明

请记得考虑设备的 PixelRatio。当你在 UI 中处理像素值时，大多数时候这些单位是“逻辑像素”或“设备无关像素”。对于 PNG 这类图像，你通常处理的是“物理像素”。你可以使用 React Native API 获取设备的 PixelRatio：PixelRatio.get()

例如，要保存一张尺寸为 1080x1080 的“FullHD”图片，你可以这样做：

const targetPixelCount = 1080; // 如果你想要全高清图片
const pixelRatio = PixelRatio.get(); // 设备的像素比
// pixels * pixelRatio = targetPixelCount，所以 pixels = targetPixelCount / pixelRatio
const pixels = targetPixelCount / pixelRatio;

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

了解更多