我使用一个图像作为基本上是一个视图,并把文字里面,我试图给予不透明的图像,但每次我尝试的文字得到不透明太我真的不知道为什么会发生
<View style={{flex: 1}}>
<View style={{height: 180,}}>
<Image source={{uri : this.state.fullURLImage}} style={{flex: 1,width: window.width,justifyContent:'center',alignItems:'center',opacity: 0.7}}>
<Text style={{textAlign: 'center',fontWeight: 'bold',color:'white',fontSize:16,}}>{this.state.title}</Text>
<Text style={{color:'white',fontSize:14,}}>{'\n'}July {this._try(this.state.day)} | {this.state.time_start} - {this.state.time_end}</Text>
</Image>
</View>
<View style={{flexGrow: 1, backgroundColor: 'white',}}>
<Text style={{textAlign:'center',color:'#1B3D6C',fontWeight:'bold',margin:10,marginTop: 40}}>{this.state.author}</Text>
<Text style={{margin:10,textAlign: (Platform.OS === 'ios') ? 'justify' : 'left'}}>{this.state.text}</Text>
</View>
<Image
source={{uri : this.state.fullURLAuthor}}
style={{
position: 'absolute',
top: 180 - 64 / 2,
height: 64,
width: 64,
left: (Dimensions.get('window').width - 64) / 2,
borderRadius: 32,
}}
/>
</View>
4条答案
按热度按时间cygmwpex1#
你需要把文本放在图像标签之外,并给予他们位置
或
同时使用
{backgroundColor: 'rgba(0,0,0,0.5)'}}
等给予不透明度zhte4eai2#
您可以只使用
<ImageBackground>
而不是<Image>
,并应用不透明度和颜色,如下所述。qoefvg9y3#
正如@Nisarg已经提到的,从图像外部放置文本是很好的。同时,这里是改变背景不透明度的代码:
izj3ouym4#
React按出现顺序绘制组件。
也就是说,我认为你的图像是在文本之上绘制的。
您可以使用多种方法来实现布局,但请尝试以下代码: