React native 反应本机图像不透明度,使文本不透明度
我使用一个图像作为基本的视图,并将文本放在其中,我试图给图像增加不透明度,但每次我尝试时,文本也会变得不透明度,我真的不知道为什么会发生这种情况React native 反应本机图像不透明度,使文本不透明度,react-native,react-native-android,react-native-ios,React Native,React Native Android,React Native Ios,我使用一个图像作为基本的视图,并将文本放在其中,我试图给图像增加不透明度,但每次我尝试时,文本也会变得不透明度,我真的不知道为什么会发生这种情况 {this.state.title} {'\n'}July{this.{try(this.state.day)}{this.state.time\u start}-{this.state.time\u end} {this.state.author} {this.state.text} 按外观顺序绘制组件 也就是说,我认为你的图像是在文本之上绘制的
{this.state.title}
{'\n'}July{this.{try(this.state.day)}{this.state.time\u start}-{this.state.time\u end}
{this.state.author}
{this.state.text}
按外观顺序绘制组件
也就是说,我认为你的图像是在文本之上绘制的
实现布局的方法不止一种,但请遵循代码尝试以下方法:
<View style={{flex: 1}}>
<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 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>
</View>
{this.state.title}
{'\n'}July{this.{try(this.state.day)}{this.state.time\u start}-{this.state.time\u end}
{this.state.author}
{this.state.text}
您需要将文本放在图像标记之外,并给它们定位
或
也可以使用类似{backgroundColor:'rgba(0,0,0,0.5)}}
的方法提供不透明度。您只需使用
而不是
,并应用不透明度和颜色,如下所述
<ImageBackground
style={{flex: 1,height: 110,resizeMode: 'cover',}}
source={imageSoure}
borderRadius={5}
resizeMode='cover'
imageStyle={{ opacity: 0.3,backgroundColor: 'YourFavouredColor'}}
>
<Text>
{someText}
</Text>
<Text>
{someOtherText}
</Text>
</ImageBackground>
{someText}
{someOtherText}
我明天会尝试,我会给出反馈,感谢没有起作用的,我认为问题不在于圆形图像,而在于请给文本增加不透明度1,我认为这会解决您的问题。问题是这个文本在图像标记内,所以整个区域对该图像中的父对象采取不透明度。仍然不起作用。您需要将文本放在图像标记外,并给它们定位,所以使用类似{backgroundColor:'rgba(0,0,0,0.5)}}}的方法给出不透明度。好的,我用您的建议解决了这个问题,将文本放在图像外,并给它们定位!谢谢
<ImageBackground
style={{flex: 1,height: 110,resizeMode: 'cover',}}
source={imageSoure}
borderRadius={5}
resizeMode='cover'
imageStyle={{ opacity: 0.3,backgroundColor: 'YourFavouredColor'}}
>
<Text>
{someText}
</Text>
<Text>
{someOtherText}
</Text>
</ImageBackground>