你有两种选择。一种是将文本呈现在图像组件上并保存该文本的位置，另一种是处理图像并获取带有该文本的新图像。
第一种选择会带来一个问题，即位置相对于图像大小而言。这意味着，如果图像在不同大小的屏幕上呈现，则文本的位置和大小也应相应移动。此选项需要良好的计算算法。另外，渲染时间可能是另一个问题。文本组件将立即呈现，但是图像组件需要首先加载图像。此选项还需要良好的渲染算法。
第二种选择需要使用第三方库或一定级别的原生代码，因为React Native不支持超出CSS限制的图像处理。一个好的、维护良好的图像处理库是gl-react-native-v2。该库可帮助您按照希望进行处理和操作图像，然后使用captureFrame(config)保存结果。虽然此选项更能够处理文件，但需要您保存新图像。
无论哪种方法都可以，只要您选择的方式适合您的用例。决策实际上取决于您的情况和偏好。
gl-react-native而不是使用react-native-view-shot来进行快照。 - crispychicken<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>
ImageBackground标签，因为使用Image标签作为容器会给你一个黄盒子警告。<ImageBackground source={SomeImage} style= {SomeStyle} resizeMode='SomeMode'>
{loader}
</ImageBackground>
如果您在图像样式中更改flex属性，或者将position: absolute设置为主图像容器并将top，bottom，left，right分配给嵌套容器，则可以通过更改相同图像来提高效率。
有用的链接可以在这里找到。
由于向图像添加子元素已被弃用，因此您可以使用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>
我正在研究是否可以使用React Native轻松实现，或者是否应该构建原生应用程序。
在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中向图像添加文本并创建新副本？
fontSize设置的。 - bennygenelfontSize也需要是相对的，但我认为这个概念仍然传达了出来，您觉得呢？ - Chris Geirmanposition: 'absolute'的文本元素。如果您想要包含文本的图像副本，则可以使用相同的方法，但是使用react-native-view-shot拍摄快照。<Image>
<Text>{"some text"}</Text>
</Image>
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))
这取决于使用情况，但如果您只想在图像上放置文本，则使用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>有几个库可供使用。如果您想将文本添加到图像中，可以使用：react-native-media-editor。这是一个相当不错的选项，用于向图像添加文本，但我建议您使用react-native-image-tools。它提供了如此多的灵活性。您可以添加文本并相应地定位它。除此之外，还有滤镜、裁剪选项、光线调整等等。