React Native-如何在背景图像上显示内容并将内容垂直居中

Question

This same question is previously asked by many people. The issue is that Image component cannot contain children .If you want to render content on top of an image, consider using the <ImageBackground> component or absolute positioning.

I have referred the article Text Over Image and previous question on stack overflow . Content over image is working using <ImageBackground> component. But how to make it work using <Image> component instead?

Answer 1

Part 1 (Text / Body of your question)

To answer the text/body of your question, the official docs say:

A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as , and add whatever children to it you would like to layer on top of it.

Thus, <ImageBackground> component is specifically designed for ability to display content over a background image. So, you must use <ImageBackground> component for placing content over an image. This behavior cannot be achieved through <Image> component.

Part 2 (Title of your question)

Now, to answer the TITLE of your question, try this:

<ImageBackground
  style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}
  source={require('path/to/img')}>
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', width: '100%' }}>
         <Text>Centered Text (both vertically and horizontally)</Text>
     </View>
</ImageBackground>

justifyContent works along primary axis (in this case column /vertical). alignItems works along secondary axis (in this case row /horizontal).

You may not need width: '100%' in child View, but I think that I've experienced some issues a couple of times. So you can experiment with that.