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

许多人以前也问过同样的问题。问题是 图像组件不能包含子元素。如果要在图像顶部渲染内容，请考虑使用组件或绝对定位。

我已经提到了这篇文章和上一个问题。图像上的内容正在使用组件工作。但是，如何使用组件来替代它呢？

第一部分文本/问题的主体

要回答问题的正文，请说：

熟悉web的开发人员的一个常见功能请求是 背景图像。要处理此用例，您可以使用 组件，具有与相同的道具，以及 添加任何您想在其上分层的子项

因此，该组件是专门为能够在背景图像上显示内容而设计的。所以，必须使用组件将内容放置在图像上。此行为无法通过组件实现

第二部分问题的标题

现在，要回答问题的标题，请尝试以下方法：

<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沿主轴工作，即“列/垂直”。alignItems在这种情况下沿次轴工作（行/水平）

---

您可能不需要width：在child视图中使用“100%”，但我认为我已经遇到过一些问题。所以你可以尝试一下。

请参考我答案的第一部分，这里也引用了官方文件。该组件是专门设计用来将内容放置在背景图像上的。此行为无法通过组件实现。