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

Question

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

我已经参考了Text Over Image 的文章和stack overflow 上的上一个问题。图像上的内容正在使用 <ImageBackground> 组件。但是如何改用<Image> 组件让它工作呢？

Answer 1

第 1 部分（问题的文本/正文）

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

熟悉网络的开发人员提出的常见功能要求是 背景图片。要处理此用例，您可以使用 <ImageBackground> 组件，它的 props 与 , 和 添加任何你想在它上面叠加的孩子。

因此，<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/vertical）。 alignItems 沿辅助轴工作（在本例中为 row/horizo​​ntal）。

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