具有变暗不透明度的文本叠加图像 React Native

Posted 2023-03-06

【中文标题】具有变暗不透明度的文本叠加图像 React Native

【英文标题】：Text Overlay Image with Darkened Opacity React Native

【发布时间】：2016-04-05 19:46:35

【问题描述】：

我正在尝试在图像上叠加标题 - 图像变暗且不透明度较低。但是，不透明度效果也改变了覆盖文本 - 使其变暗。有什么解决办法吗？如下所示：

这是我的自定义组件的代码（文章预览 - 上图是一排文章预览组件）：

//component for article preview touchable image
/* will require the following
- rss feed and api
- user's keyword interests from parse In home.js
- parse db needs to be augmented to include what they heart
- parse db needs to be augmented to include what they press on (like google news)
*/
var React = require('react-native');
var 
  View, 
  StyleSheet, 
  Text, 
  Image, 
  TouchableHighlight, 
 = React;

//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var ImageButton = require('../../common/imageButton');
var KeywordBox = require('../../authentication/onboarding/keyword-box');

//additional libraries

module.exports = React.createClass(
  //onPress function that triggers when button pressed
  //this.props.text is property that can be dynamically filled within button 
  /* following props:
    - source=this.props.source
    - onPress=this.props.onPress
    - this.props.text
    - this.props.heartText
    - key=this.props.key 
    - text=this.props.category 
    - this.props.selected
  */
  render: function() 
    return (
      <TouchableHighlight 
        underlayColor='transparent'
        onPress=this.props.onPress >
          <Image 
            source=this.props.source 
            style=[styles.articlePreview, this.border('red')]>
                  <View style=[styles.container, this.border('organge')]>
                      <View style=[styles.header, this.border('blue')]>
                          <Text style=[styles.previewText]>this.props.text</Text>
                      </View>
                      <View style=[styles.footer, this.border('white')]>
                        <View style=[styles.heartRow, this.border('black')]>
                          <ImageButton
                              style=[styles.heartBtn, , this.border('red')]
                              resizeMode='contain'
                              onPress=this.onHeartPress
                              source=require('../../img/heart_btn.png') />
                          <Text style=[styles.heartText]>this.props.heartText + ' favorites'</Text>
                        </View>
                          <KeywordBox 
                              style=[styles.category, this.border('blue')]
                              key=this.props.key 
                              text=this.props.category 
                              onPress=this.props.categoryPress
                              selected=this.props.selected />
                      </View>
                  </View>
          </Image>
      </TouchableHighlight>
    );
  , 
  onHeartPress: function() 
    //will move this function to a general module
  , 
  border: function(color) 
      return 
        //borderColor: color, 
        //borderWidth: 4,
       
   ,
);

var styles = StyleSheet.create(
  heartText: 
    color: 'white', 
    fontSize: 12, 
    fontWeight: 'bold',
    alignSelf: 'center', 
    marginLeft: 5, 
    fontFamily: 'SFCompactText-Medium'
  , 
  heartRow: 
    flexDirection: 'row', 
    justifyContent: 'space-around', 
    alignSelf: 'center', 
    justifyContent: 'center', 
  , 
  heartBtn: 
    height: (92/97)*(window.width/13), 
    width: window.width/13, 
    alignSelf:'center', 
  , 
  category: 
    fontFamily: 'Bebas Neue', 
    fontSize: 10,
    fontWeight: 'bold'
  , 
  header: 
    flex: 3, 
    alignItems: 'center', 
    justifyContent: 'space-around', 
    marginTop: window.height/30,
  , 
  footer: 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    margin: window.height/50,
  , 
  container: 
    flex: 1, 
    backgroundColor: 'black', 
    opacity: 0.6, 
  , 
  articlePreview: 
    flex: 1, 
    height: window.height/3.2, 
    width: window.width, 
    flexDirection: 'column'
  , 
  previewText: 
    fontFamily: 'Bebas Neue', 
    fontSize: 23,
    color: 'white', 
    alignSelf: 'center', 
    textAlign: 'center', 
    margin: 5, 
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  , 

);

【参考方案1】：

尝试将容器的样式更改为

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

【讨论】：

这可以解决问题。如果rgba() 不起作用，则应将 React Native 更新到 0.16 或更高版本。

【参考方案2】：

不要将不透明度应用于整个 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>

【讨论】：

超级出路..简单而最好的

通常希望使用<ImageBackground> 作为其他组件的背景。在这种情况下，纳德的回答也会给<ImageBackground> 的孩子着色，即使他们是同龄人。通过 imageStyle 道具设置不透明度时，这不是问题。这是我认为最好的答案。

【参考方案3】：

不透明度会影响整个视图。尝试改为拥有 2 个视图。一个绝对定位于包含图像的位置。另一个包含您的文本和按钮内容。

您可以使用 position : "absolute", top: 0, left: 0 来绝对定位视图

【讨论】：

我今天会研究一下 - 似乎我只是切换了 UI 以完全避免这个问题，并采取了谷歌新闻 UX 路线

你运气好吗？

我最终所做的是完全改变视图以类似于 Google 新闻

【参考方案4】：

我使用 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>

【讨论】：

内容的 backgroundColor rgba 可以解决所有问题。 ...

<Image> 组件不能包含子组件。

@Jago 你可以使用reactnative.dev/docs/imagebackground