Question

许多人以前曾问过同样的问题。问题是 图片组件不能包含子项。如果要在图像上呈现内容，请考虑使用<ImageBackground>组件或绝对定位。

我在Text Over Image上提到了文章stack overflow 和上一个问题。图像上的内容使用<ImageBackground>组件工作。但是如何使用<Image>组件使其工作呢？

Answer 1

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

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

熟悉网络的开发人员的常见功能请求是背景图片。要处理此用例，您可以使用 <ImageBackground>组件，具有相同的道具，和添加你想要在它上面分层的任何孩子。

因此，<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 /水平）。

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

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

1 个答案: