反应本机返回 ImageBackground 居中

Question

我有一张图片，我试图将一些文字居中放置。

为此，我使用 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>

Answer 1

您需要添加一个额外的视图来包装 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>

反应本机返回 ImageBackground 居中

react native back ImageBackground centering

css

reactjs

image

react-native

imagebackground