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

Question

之前很多人都问过同样的问题。问题是图像组件不能包含子组件。如果您想在图像之上渲染内容，请考虑使用 <ImageBackground>组件或绝对定位。

我已经引用了文章Text Over Image和上一个关于 stack overflow 的问题。图像上的内容正在使用 <ImageBackground> 工作成分。但如何使用 <Image> 使其工作组件代替？

Answer 1

第 1 部分(问题的正文/正文)

要回答您问题的正文/正文，official docs说:

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.

因此，<ImageBackground>组件专门设计用于在背景图像上显示内容的能力。因此，您必须使用<ImageBackground>用于将内容放置在图像上的组件。此行为无法通过 <Image> 实现组件。

第 2 部分(问题标题)

现在，要回答您问题的标题，请尝试以下操作:

<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沿主轴工作(在本例中 column/垂直)。 alignItems沿辅助轴工作(在本例中 row/水平)。

您可能不需要width: '100%'在 child View 中，但我认为我已经遇到过一些问题几次。所以你可以尝试一下。