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

Question

我正在研究是否可以使用React Native轻松实现,或者我是否应该构建本机应用程序.

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

我如何添加文本和图像并在本机中生成它的新副本？我不是在寻找详细的代码,只是为了解释如何开始.

更新: 它是一个很好的替代方案,只是保存图片上的消息坐标而不是生成新的图像？

Answer 1

你可以选择2种方式.您可以在图像组件上渲染文本并保存该文本的位置,也可以处理图像并获取带有文本的新图像.

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

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

如果你的方式适合你的用例,那么这两种方式都是好的.该决定实际上取决于您的情况和偏好.

Answer 2

<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 20}}>
    <Image
     style={{
       flex: 1,
       width:100,
       height:100,
     }}
     source={require('../imgs/star.png')}
     />
     <Text style={{position: 'absolute', fontSize: 20}}>890</Text>
 </View>

Answer 3

如果您只需要在图像上显示文本，您可以将图像包装在视图中，并在图像后面插入带有 的文本元素position: 'absolute'。如果您想要包含文本的图像的副本，那么您可以使用相同的方法，但使用react-native-view-shot拍摄快照