This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).
react-native-view-shot
一个允许你捕获 React Native 视图并将其保存为图像的库。
Android
iOS
Included in Expo Go
For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.
给定一个视图,captureRef 本质上会对该视图进行截图,并为你返回一张图片。这对于签名板之类的场景非常有用:用户在上面绘制内容,然后你想把它保存成一张图片。
如果你对从 GLView 获取快照感兴趣,我们建议你改用 GLView 的 takeSnapshotAsync。
安装
Terminal
- npx expo install react-native-view-shotIf 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,因此 像素 = targetPixelCount / pixelRatio const pixels = targetPixelCount / pixelRatio; const result = await captureRef(this.imageContainer, { result: 'tmpfile', height: pixels, width: pixels, quality: 1, format: 'png', });
了解更多
访问官方文档
获取 API 及其用法的完整信息。