React-Native Image Opacity 赋予文本不透明度

Question

我基本上将图像用作视图并在其中放置文本，我尝试为图像赋予不透明度，但每次我尝试文本也变得不透明时，我真的不知道为什么会这样

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

Answer 1

React 按照出现的顺序绘制组件。

就是说，我认为您的图像是在文本之上绘制的。

你有不止一种方法来实现你的布局，但按照你的代码试试这个：

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

Answer 2

您需要将 Text 放在图片标签之外并给它们定位

或

也可以使用 {backgroundColor: 'rgba(0,0,0,0.5)'}}

来赋予不透明度

Answer 3

您可以只使用 <ImageBackground> 而不是 <Image> 并应用不透明度和颜色，如下所述。

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

React-Native Image Opacity 赋予文本不透明度

React-Native Image Opacity giving opacity to text

react-native

react-native-android

react-native-ios