如何在 iOS 上的 React Native 中的 ImageBackground 上的父视图中显示文本元素？

Posted 2023-03-14

【中文标题】如何在 iOS 上的 React Native 中的 ImageBackground 上的父视图中显示文本元素？

【英文标题】：How do I display a Text element inside a parent View over an ImageBackground in React Native on iOS?

【发布时间】：2019-05-06 14:21:59

【问题描述】：

我在 react native 中有一个包含背景图像的屏幕，我想将文本放在此背景图像之上，但文本将不可见，因此我将 Text 组件与 View 组件包装在一起。如何在 iO 上渲染文本？

我正在使用 expo cli 运行 react native，react native 是 sdk-32。文本在 android 上呈现良好。当我删除视图组件时，文本在 iO 上呈现良好

<ImageBackground source=require('../assets/launch3.jpg') style= height: '100%', paddingLeft: '6%', paddingRight: '6%' >
<View style= width: '100%', height: '15%', backgroundColor: 'rgba(255, 255, 255, 0.4)', borderRadius: 5, marginTop: '90%' >
<Text style= width: '90%', alignSelf: 'center', textAlign: 'center', fontSize: 18, color: '#005F6A', marginTop: '5%' >
"Text to display"
</Text>
</View>
</ImageBackground>

我希望文本“要显示的文本”在 iO 上呈现，但只呈现包装它的视图。

【参考方案1】：

在包含Text标签的View标签中设置position属性为absolute。

<ImageBackground source=require('../assets/launch3.jpg') style= height: '100%', paddingLeft: '6%', paddingRight: '6%' >
<View style= position: 'absolute', width: '100%', height: '15%', backgroundColor: 'rgba(255, 255, 255, 0.4)', borderRadius: 5, marginTop: '90%' >
<Text style= width: '90%', alignSelf: 'center', textAlign: 'center', fontSize: 18, color: '#005F6A', marginTop: '5%' >
"Text to display"
</Text>
</View>
</ImageBackground>