Question

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

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

<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上呈现，但仅呈现包装它的View。

Answer 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>

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

1 个答案: