我们如何在反应原生项目中将多个图像合并为单个图像

Posted 2023-03-11

【中文标题】我们如何在反应原生项目中将多个图像合并为单个图像

【英文标题】：How can we merge multiple image into single image in react native project

【发布时间】：2020-06-23 05:54:19

【问题描述】：

在我的一个项目中，我使用 RNCamera 来捕获图像。相机屏幕也有自定义组件。用相机显示的组件之一是指南针图像。我需要将指南针图像与捕获的图像合并。

我已经尝试过这个库 react-native-view-shot。将 RNCamera 包裹在视图拍摄视图中。但是结果只包含没有指南针的捕获图像。

我也尝试过 react-native-images-combine。此处第二张图片始终位于第一张图片的左侧。

我正在寻找更好的解决方案。任何人都可以提出一种在 react-native 中解决此问题的方法。那会很好。谢谢。

【参考方案1】：

尝试将两个图像放在一个 View 标记中，并将每个图像放在一个自己的 View 标记中。比提供“z-index”样式属性将您的图像放在上面。 告诉我！

【讨论】：

终于找到了解决上述问题的办法。我使用了名为 react-native-view-snapshot 和 react-native-photo-manipulator (github.com/Jarred-Sumner/react-native-photo-manipulator) 的库。由于我的第二个视图是相机上方的自定义视图（RNCamera）“z-index”对我不起作用。 react-native-view-snapshot 用于截取第二张图像，并使用 react-native-photo-manipulator 合并从相机拍摄的照片和截图图像。