我正在研究使用 React Native 是否可以轻松实现，或者我是否应该构建一个原生应用程序。
我想编辑照片库中的图像并向其添加文本叠加层。把它想象成一张明信片，上面有问候信息。
我将如何添加文本和图像并在 react native 中制作它的新副本？我不是在寻找详细的代码，只是为了解释如何开始。
更新：只将消息的坐标保存在图片上而不是生成新图像会是一个不错的选择吗？
你可以用两种方式。您可以在图像组件上呈现文本并保存该文本的位置，也可以处理图像并获取包含文本的新图像。
第一个选项提出了该位置相对于图像大小的问题。这意味着，如果图像在不同大小的屏幕上呈现，则文本的位置和大小也应相应地移动。此选项需要良好的计算算法。此外，另一个问题可能是渲染时间。文本组件将立即呈现，但图像组件需要先加载图像。此选项还需要一种很好的渲染算法方式。
如果没有第三方库或某种级别的本机代码，第二种选择是不可能的，因为 react-native 不支持超出 CSS 限制的图像处理。一个良好且维护的图像处理库是 gl-react-native-v2。此库可帮助您根据需要处理和操作图像，然后使用captureFrame(config)保存结果。此选项更有能力处理文件，但需要您保存新图像。
如果您采用的方式适合您的用例，那么无论哪种方式都是好的。决定实际上取决于您的情况和偏好。
您可以使用 react-native 的ImageBackground标签，因为使用Image标签作为容器会给你一个黄色框警告。
带有覆盖的示例代码如下所示
<ImageBackground source={SomeImage} style= {SomeStyle} resizeMode='SomeMode'>
{loader}
</ImageBackground>
如果通过更改图像样式中的 flex 属性来处理同一图像，或者可以将position: absolute设置为主图像容器并将top , bottom, left, right分配给嵌套容器，则会非常有效。
有用的链接可以在这里找到
<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>
我正在研究使用 React Native 是否可以轻松实现，或者我是否应该构建一个原生应用程序。
这在反应原生中听起来非常可行
我想编辑照片库中的图像并向其添加文本叠加层。把它想象成一张明信片，上面有问候信息。
我想我会将所有相关元数据捕获为一个对象......
{
image: {
uri: './assets/image.jpg',
height: 576,
width: 1024
},
message: {
fontFace: 'Calibri',
fontSize: 16,
text: 'Happy Holidays!'
boundingBox: {
height: '30%',
width: '30%',
top: 0,
left: 0
}
}
}
有了上述细节(也许更多)，您就可以在任何设备上重建设计意图，无论大小(平板电脑与移动设备)或像素深度如何。boundingBox将以相对于图像渲染尺寸的术语表示。在上面的示例中，消息将包含在不超过图像宽度 30%、高度 30% 的文本框中，并位于左上角。
如何将文本添加到图像并在 react native 中制作它的新副本？
这消除了进行任何屏幕截图或实际图像处理等的需要，无需"制作新副本"。只需将它们视为两个独立且不同的资产，然后在渲染时使用捕获的元数据合并它们。
最后的想法：如果您"需要"像您在另一个解决方案的另一条评论中所述"将完成的照片上传到服务器"，您可以使用元数据作为指导使用任意数量的技术来执行此操作。
您可以使用position: absolute，因为不推荐向映像添加子项。以下代码将在图像的中间(垂直和水平)对齐文本：
<View>
<Image
source={yourImageUrl}
resizeMode={'cover'}
style={{
width: 300,
height: 300
}}
/>
<View style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 300, alignItems: 'center', justifyContent: 'center' }}>
<Text>Your overlay text</Text>
</View>
</View>
如果您只需要在图像上显示文本，则可以将图像包装在视图中，然后在图像之后插入带有position: 'absolute'的文本元素。如果您想要包含文本的图像的副本，那么您可以使用相同的方法，但使用 react-native-view-shot 拍摄快照
据我所知，图像组件可以用作容器，因此您可以执行以下操作：
<Image>
<Text>{"some text"}</Text>
</Image>
下面的代码是我用来在图像上以特定坐标添加文本的代码。
Xcode 8.3.2 Swift 3.1
func textToImage(drawText text: NSString, inImage image: UIImage, atPoint point: CGPoint) -> UIImage {
let textColor = UIColor.white
let textFont = UIFont(name: "Helvetica Bold", size: 10)!
let scale = UIScreen.main.scale
UIGraphicsBeginImageContextWithOptions(image.size, false, scale)
let textFontAttributes = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: textColor,
] as [String : Any]
image.draw(in: CGRect(origin: CGPoint.zero, size: image.size))
let rect = CGRect(origin: point, size: image.size)
text.draw(in: rect, withAttributes: textFontAttributes)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage!
}
并调用上述方法，如下所示
let imageWithText = textToImage(drawText: "textOnImage", inImage:yourImage, atPoint: CGPoint(x:9,y:11))
有几个库可用于此。如果要将文本添加到图像中，可以使用：react-native-media-editor。这是向图像添加文本的不错选择，但我建议您使用react-native-image-tools。它提供了如此多的灵活性。您可以添加文本并相应地定位它。除此之外，还有滤镜、裁剪选项、光线调整等等。
这取决于用例，但如果您只想在图像上放置文本，使用ImageBackground是一种好方法。
像下面这样做。
<ImageBackground
source={{ uri: hoge }}
style={{
height: 105,
width: 95,
position: 'relative', // because it's parent
top: 7,
left: 5
}}
>
<Text
style={{
fontWeight: 'bold',
color: 'white',
position: 'absolute', // child
bottom: 0, // position where you want
left: 0
}}
>
hoge
</Text>
</ImageBackground>