如何在本机反应中渲染图像背景内的文本？

Question

我想在 ImageBackground 组件中呈现一个文本组件。

我尝试的是

<ImageBackground
    source={{uri: smartPaperData.backgroundImage}}
    resizeMode="contain"
    resizeMethod="scale"
    style={{
         height: '100%',
         width: undefined,
         backgroundColor: 'yellow',
    }}>
            <Text>Hello</Text>
</ImageBackground>

通过使用上面的代码，这就是我得到的。 （你可以在左上角看到你好）

我需要 Hello 文本出现在图像的左上角，但文本出现在其他地方。

谁能帮我解决这个问题

Answer 1

宽度完全取决于原始图像大小。 您需要创建具有固定宽度的容器，例如

<View style={{width: '80%'}}>
   <ImageBackground
    source={{uri: smartPaperData.backgroundImage}}
    resizeMode="contain"
    resizeMethod="scale"
    style={{
         height: '100%',
         width: '100%',
         backgroundColor: 'yellow',
    }}>
            <Text>Hello</Text>
</ImageBackground>
</View>