反应原生背景颜色覆盖在图像上

Posted 2023-05-08

【中文标题】反应原生背景颜色覆盖在图像上

【英文标题】：React Native backgroundColor overlay over image

【发布时间】：2017-05-28 08:10:58

【问题描述】：

我正在使用一张图片作为我的一个页面的背景。我想在图像上添加一个不透明度的背景颜色。我不确定如何使用 React Native 实现这一点。

render() 
  return (
    <Image source=require('./assets/climbing_mountain.jpeg') style=styles.container>
      <Text>Hello</Text>
    </Image>
  )


const styles = StyleSheet.create(
  container: 
  flex: 1,
  width: null,
  height: null,

这是我在网页上实现此目的的方法：How to make in CSS an overlay over an image?

【参考方案1】：

您可以做的一件很酷的事情是在其上放置一个绝对定位的视图。

<View>
  <Image source=require('./assets/climbing_mountain.jpeg') style=  StyleSheet.absoluteFillObject resizeMode='cover'>
    <Text>Hello</Text>
  </Image>
  <View style=styles.overlay />
</View>

...
const styles = StyleSheet.create(
   overlay: 
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0,0,0,0.5)'
   
 )

absoluteFillObject与

相同

 position: 'absolute',
 top: 0,
 left: 0,
 right: 0,
 bottom: 0

如果您希望能够点击覆盖，只需将视图上的 pointerEvents 属性设置为 none

文档：https://facebook.github.io/react-native/docs/stylesheet.html#absolutefillobject

【讨论】：

谢谢，凯文。好主意。我试过了，但它使我的图像非常小，只有屏幕的 1/10 左右。

哦，我的错。错过了什么。在这种情况下，您需要使图像也完全填充。您还需要添加您选择的 resizeMode。

我使用您的答案对我的代码进行了一些修改并使其正常工作。非常感谢！！

【参考方案2】：

感谢@Kevin Velasco，我得以完成这项工作。

render() 
  return (
    <View style=styles.container>
      <Image source=require('./assets/climbing_mountain.jpeg') style=styles.imageContainer>
      </Image>
      <View style=styles.overlay />
    </View>
  )


const styles = StyleSheet.create(
  container: 
    flex: 1,
    width: null,
    height: null,
  ,
  imageContainer: 
    flex: 1,
    width: null,
    height: null,
  ,
  overlay: 
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(69,85,117,0.7)',
  
)

【讨论】：

absoluteFillObject 使它工作。另外我正在包装错误的覆盖视图:(

【参考方案3】：

这就是我如何让它为我工作的方式

const visaCard = require('../Images/card_visa.png');
  const [iscardBloqued, setIsCardBolqued] = useState(false);
  const [hideInfos, setHideInfos] = useState(true);

这是组件的外观

  <View style=styles.imageContainer>
      <ImageBackground
        source=visaCard
        imageStyle= borderRadius: wp(3) 
        style=styles.imageStyle
        resizeMode="cover"
      >
        hideInfos && (
          <TouchableOpacity activeOpacity=0.8 style=styles.cardWhiteButton>
            <FText style=styles.whiteButtonText>Afficher les infos</FText>
          </TouchableOpacity>
        )

        iscardBloqued && (
          <View style=styles.overlay>
            <TouchableOpacity
              activeOpacity=0.7
              style= alignItems: 'center' 
            >
              <Lock />
              <FText style=styles.overlayText>Carte bloqueé</FText>
            </TouchableOpacity>
          </View>
        )
      </ImageBackground>
    </View>
  

她是我的样式页面：“我更喜欢将它与我的组件分开”

export default StyleSheet.create(
  container: 
    flex: 1,
    alignItems: 'center',
  ,

  imageContainer: 
    alignSelf: 'center',
    marginTop: hp(3),
  ,
  imageStyle: 
    height: hp(25),
    width: wp(85),
  ,
  cardWhiteButton: 
    marginHorizontal: wp(8),
    backgroundColor: 'white',
    marginTop: hp(17),
    height: hp(5),
    width: wp(32),
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: wp(5),
  ,
  whiteButtonText: 
    fontSize: hp(1.4),
    color: 'white',
    fontFamily: 'Roboto',
  ,
  overlay: 
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.89)',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: wp(3),
  ,
  overlayText: 
    color: 'white',
    fontSize: hp(1.6),
    fontFamily: 'Roboto',
    marginTop: hp(2),
  ,
);

【参考方案4】：

在这里我用来解决我的项目，谢谢大家：

<View>
<View
style = 
    //make overlay
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
   //change this color to the other one which you want
    backgroundColor: 'green',
    

/>
<Image 
source =  uri: Your-Image-Here 
style =  height: 150, width: 200, resizeMode: 'cover', borderBottomLeftRadius: 20, borderTopLeftRadius: 20 
/>
</View>

【讨论】：

您发布的代码不是可运行的sn-p（只需单击“运行...”按钮，您就会意识到这一点）！请编辑您的答案并将您的代码格式化为普通代码块（使用简单的三个反引号代码围栏）。

【参考方案5】：

在 React Native 图像背景上进行叠加：如果您只想在 React Native 中叠加背景图像而不影响 标签内的其他元素，请执行以下操作：

//Fetching the background image from online, you can use any image source of your choice.

const GoProImageBackGd =  uri: "https://images.pexels.com/photos/2462402/pexels-photo-2462402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" ;

// Setting the background image for the view:

 <View style=styles.GoProBox>
            <ImageBackground source=GoProImageBackGd resizeMode='cover' style=styles.goProBgImage>
            <View style=styles.overlayView/>
            <Text style=styles.goProText> Want to join the hot section? Go hot with Pro!</Text>
            <GoProButton />
            </ImageBackground>

//Stylesheet

const styles = StyleSheet.create(
GoProBox: 
        width: '95%',
        height: 200,
        margin: 5,
        backgroundColor: '#00cc00',
        borderRadius: 10,
        alignSelf: 'center',
        overflow: 'hidden'

    ,
goProBgImage: 
        width: '100%', height: '100%',


    ,

    goProText: 
        textAlign: 'center',
        fontSize: 20,
        marginTop: 10,
        fontWeight: 'bold',
        padding: 10,
        color: 'white'

    ,
GoProButton: 
        height: 60,
        width: 200,
        backgroundColor: 'red',
        borderRadius: 15,
        alignSelf: 'center',
        justifyContent: 'center',
        top: 50
    ,
overlayView: 
        height: "100%",
        width: "100%",
        position: 'absolute',
        backgroundColor: 'rgba(0, 204, 0, 0.5)',

    

)