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(); // 设备的像素比
// 像素 * 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',
});

了解更多