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

标签 javascript reactjs react-native

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

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

最佳答案

第 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 中,但我认为我已经遇到过一些问题几次。所以你可以尝试一下。

关于javascript - React Native - 如何在背景图像上显示内容并垂直居中该内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49443035/

相关文章:

reactjs - 逗号运算符无序列的意外用户

android - 在模拟器中运行的 React Native 导致 bundle 失败 : permission denied error

android - react native 。安卓。推送通知权限

javascript - 更改按钮颜色 onPress(切换功能) React Native

javascript - 如何提前打破 promise 链以在 Express 中发送错误?

javascript - 在固定字符串后获取单位数字?

javascript - React Context 和 hookrouter 不会在组件挂载时重定向

javascript - 优雅地处理 REST 服务器错误

javascript - 未捕获的类型错误 : Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined

javascript - React.js 粘性导航不起作用