Question

我有一个使用Expo SDK版本32设置的React Native项目。

我想要的：截取特定视图的屏幕截图，然后将生成的图像放入PDF。然后，我想让用户能够打印它。这需要在iOS和Android上都可以使用。

我尝试过的操作：请参见下面的此存储库。所有代码都在App.js中。 https://github.com/ttchuah/react-native-screenshot

简而言之，我正在使用Expo的takeSnapshotAsync方法来获取View组件的屏幕截图。为了测试它是否有效，我将生成的URI放入Image组件中。（它看起来像/private/var/mobile/Containers/Data/Application/9DB69B08-C2E3-4AE7-8628-1C635A9E07F4/tmp/ReactABI32_0_0Native/57E0785C-9FFB-44EE-B976-8B6DAEAE7A05.png）

目前，它工作正常。

然后，我尝试执行此操作。请注意，snapshot变量是屏幕快照的URI。 pixels仅包含一个数字值。

let html = `<img src="${snapshot}" width="100%" style="border:2px solid black; height:${pixels}px; width:${pixels}px;" />`;
            html += '<p>Hello world</p>'

            const pdf = await Print.printToFileAsync({ html });

            return Print.printAsync({ uri: pdf.uri }).catch(error =>
                Alert.alert(error.message)
            );

这将打开设备的打印预览屏幕。

结果：

预期结果-图片应该显示为黑色边框。

实际结果-该图像仅显示在Android上。在iOS中为空白。

我应该注意，这曾经在Expo v30上的iOS系统上起作用。但是，我必须升级到v32才能利用Expo漏洞修复功能，因此对我来说，回到v30并不是一个选择。

感谢您的帮助。

Answer 1

我刚刚在iPhone 10上尝试了此代码，它可以工作，最新的expo SDK，不同的图像URL，因此，您的问题出在快照中。在iOS中生成快照的方式可能发生了重大变化。

如何在Expo React Native中截屏并发送到PDF

1 个答案: