Javascript 不透明度变暗的文本覆盖图像

我试图覆盖一个标题的图像-与较低的透明度图像变暗。但是，不透明度效果也会改变覆盖文本，使其变暗。有什么办法吗？以下是is的外观：

下面是我的自定义组件代码（文章预览-上面的图片是一行文章预览组件）：

//文章预览可触摸图像组件
/*将需要以下内容
-rss提要和api
-home.js中解析的用户关键字兴趣
-parse db需要扩充，以包含它们所关心的内容
-parse db需要扩充，以包含它们所关注的内容（如google新闻）
*/
var React=require（'React-native'）；
变量{
看法
样式表，
文本，
形象,，
触控高光，
}=反应；
//尺寸
变量维度=要求（“维度”）；
var window=Dimensions.get（'window'）；
var ImageButton=require（'../../common/ImageButton'）；
var KeywordBox=require（'../../authentication/onboarding/KeywordBox'）；
//附加库
module.exports=React.createClass({
//按下按钮时触发的onPress功能
//this.props.text是可以在按钮中动态填充的属性
/*以下道具：
-source={this.props.source}
-onPress={this.props.onPress}
-{this.props.text}
-{this.props.heartText}
-key={this.props.key}
-text={this.props.category}
-这是我选择的
*/
render:function（）{
返回(
{this.props.text}
{this.props.heartText+'favorites'}
);
}, 
onHeartPress:function（）{
//将此功能移动到通用模块
}, 
边框：功能（颜色）{
返回{
//边框颜色：颜色，
//边框宽度：4，
} 
},
});
var styles=StyleSheet.create({
正文：{
颜色：'白色'，
尺寸：12，
fontWeight:'粗体'，
对齐自我：“中心”，
边缘左：5，
fontFamily:“SFCompactText媒体”
}, 
心窝：{
flexDirection:'行'，
为内容辩护：“周围的空间”，
对齐自我：“中心”，
为内容辩护：“中心”，
}, 
heartBtn：{
高度：（92/97）*（窗宽/13），
宽度：window.width/13，
alignSelf:“中心”，
}, 
类别：{
fontFamily:“Bebas Neue”，
尺寸：10，
fontWeight:“粗体”
}, 
标题：{
弹性：3，
对齐项目：“居中”，
为内容辩护：“周围的空间”，
marginTop:window.height/30，
}, 
页脚：{
弹性：1，
flexDirection:'行'，
justifyContent:'之间的空间'，
对齐项目：“居中”，
边距：窗高/50，
}, 
容器：{
弹性：1，
背景颜色：“黑色”，
不透明度：0.6，
}, 
文章预览：{
弹性：1，
高度：窗高/3.2，
宽度：window.width，
flexDirection:“列”
}, 
预览文本：{
fontFamily:“Bebas Neue”，
尺寸：23，
颜色：'白色'，
对齐自我：“中心”，
textAlign:'中心'，
差额：5，
位置：'绝对'，
排名：0，
右:0,，
底部：0，
左：0
}, 
});

尝试将容器的样式更改为

container: {
 flex: 1, 
 backgroundColor: 'rgba(0,0,0,.6)'
},

---

不透明度将影响整个视图。尝试使用两个视图。这是一个绝对定位的图像包含。另一个与您的文本和按钮内容

---

您可以使用position:“absolute”，top:0，left:0来确定视图的绝对位置。我使用Background-inside-Image标记解决了我的工作，效果很好。 像这样

<Image source={require('./img/2.jpg')} style=
              {{height:deviceRowHeight,width:deviceWidth}}>
    <View style={{backgroundColor:'rgba(0,0,0,.6)',
                 height:deviceRowHeight,width:deviceWidth}}>
         <Text> Test Text </Text>
    </View>
</Image>

测试文本

不要将不透明度应用于整个ImageBackground元素，而是将其应用于图像本身，例如

<ImageBackground style={styles.imageContainer}
                 imageStyle={{ opacity: 0.5 }}
                 source={require('../assets/images/background.png')}>
                <View style={styles.welcomeContainer}>
                    <Image source={require('../assets/images/zeptagram-logo.png')} style={styles.welcomeImage} />
                </View>
            </ImageBackground>

这就是关键所在。如果

rgba（）

不起作用，你应该将React Native更新为0.16或更高版本。我今天将对此进行研究-似乎我只是切换了UI以完全避免问题，并选择了google news UX Routed你运气好吗？我最终做的是将视图完全更改为类似于google news，而不是用于内容修复的背景色rgba一切<代码>组件不能包含子组件。@Jago您可以使用super wayout。。简单且最好使用

作为其他组件的背景是很常见的。在这种情况下，纳德的回答也会给

的孩子们染色，即使他们是同龄人。当通过imageStyle道具设置不透明度时，这不是问题。我认为这是最好的答案。

<ImageBackground style={styles.imageContainer}
                 imageStyle={{ opacity: 0.5 }}
                 source={require('../assets/images/background.png')}>
                <View style={styles.welcomeContainer}>
                    <Image source={require('../assets/images/zeptagram-logo.png')} style={styles.welcomeImage} />
                </View>
            </ImageBackground>