如何在 React Native 中向图像添加文本？

Question

我正在研究 React Native 是否可以轻松实现，或者我是否应该构建一个原生应用程序。

我想编辑照片库中的图像并向其添加文本叠加层。可以把它想象成一张带有问候语的明信片。

我如何将文本添加到图像并在 React Native 中制作它的新副本？我不是在寻找详细的代码，只是为了解释如何开始。

更新： 仅保存图片上消息的坐标而不是生成新图像是否是一个很好的选择？

原文由 crispychicken 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以采用两种方式。您可以在图像组件上呈现文本并保存该文本的位置，或者您可以处理图像并获得带有文本的新图像。

第一个选项提出了该位置与图像大小相关的问题。这意味着如果图像在不同大小的屏幕上呈现，文本的位置和大小也应该相应地移动。这个选项需要一个好的计算算法。此外，另一个问题可能是渲染时间。文本组件将立即呈现，但图像组件需要先加载图像。此选项还需要一种好的渲染算法。

如果没有第三方库或某种级别的本地代码，第二个选项是不可能的，因为 react-native 不支持超出 CSS 限制的图像处理。一个良好且维护良好的图像处理库是 gl-react-native-v2 。该库可帮助您根据需要处理和操作图像，然后使用 captureFrame(config) 保存结果。此选项更能处理文件，但需要您保存新图像。

如果您采用的方式适合您的用例，那么任何一种方式都很好。该决定实际上取决于您的情况和偏好。

原文由 bennygenel 发布，翻译遵循 CC BY-SA 3.0 许可协议