我有一张图片,我试图在上面放置一些文字。
为此,我使用 ImageBackground 来拥有图像的子元素。
然而,图片在小型设备上会被缩小,如果可能的话,图片会被缩小
当我将我的文本居中时,它会在整个图像比例之后居中(在您可以看到整个图像的大屏幕上,它居中 - 在小屏幕上它的偏移量是因为一些图像被裁剪以适合。
<ImageBackground style={{ width: wp('50%'),
height: hp('50%'),
resizeMode: 'cover',
justifyContent: 'center',
alignItems: 'center' }}
source={require('../assets/images/12.jpg')}>
// if the full image is showing - it's centered, otherwise not!
<Text style={{ color: "red" }}>Centered text</Text>
</ImageBackground>
最佳答案
您需要添加一个额外的 View 来包装 ImageBackground 并添加样式属性 justifyContent 和 alignItems 居中,我认为这会消除您的问题。
<View style={{ flex:1 , justifyContent: 'center', alignItems: 'center' }}>
<ImageBackground
style={{ width: wp('50%'), height: hp('50%'), resizeMode: 'cover', justifyContent: 'center', alignItems: 'center' }}
source={require('../assets/images/12.jpg')}>
// if the full image is showing - it's centered, otherwise not!
<Text style={{ color: "red" }}>Centered text</Text>
</ImageBackground>
</View>
关于css - react native 返回 ImageBackground 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56357246/