如何在React Native iOS中对图像进行透明渐变? [英] How to have a transparent gradient over an Image in React Native iOS?

问题描述

我一直在处理具有黑色和透明边的图像上的渐变矩形，我一直在寻找react native中的渐变对象，但没有找到，但是有一个react-native模块可以做到这一点，但是问题在于它确实可以在android的透明环境下工作，但是在iOS上却不起作用，它显示白色来代替透明面

I have been dealing with the a gradient rectangle over an Image that has a black and a transparent sides, I have been looking about a gradient object in react native and I didn't found, but there is a react-native module that does this, but the problem is that it does work in android the transparency, but in iOS, it doesn't work, it shows white in place of the transparent side

比起我一直在寻找本机iOS解决方案，我确实做到了，但是它有点复杂，并且我无法在代码本机中实现本段

and than I was looking about a native iOS solution, I did but it's a bit complex, and I can't implement in react native this the snippet

CAGradientLayer *gradientMask = [CAGradientLayer layer];
gradientMask.frame = self.imageView.bounds;
gradientMask.colors = @[(id)[UIColor whiteColor].CGColor,
                    (id)[UIColor clearColor].CGColor];
self.imageView.layer.mask = gradientMask; <-- // looking for a way to achieve this in react native 

这是我的反应本机代码

    <Image ref={r => this.image = r}  style={styles.container} source={require('../assets/default_profile_picture.jpg')}>
      <LinearGradient ref={r => this.gradiant = r} locations={[0, 1.0]}  colors={['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']} style={styles.linearGradient}>
      </LinearGradient>
    </Image>

我不知道如何将LinearGradient作为掩码传递给Image

I don't know how to pass LinearGradient to Image as a mask

推荐答案

尝试positioning LinearGradient absolute向LinearGradient添加样式

Try positioning LinearGradient absolute adding style to LinearGradient

 <Image ref={r => this.image = r}  style={styles.container} 
        source={require('../assets/default_profile_picture.jpg')}>
      <LinearGradient ref={r => this.gradiant = r} locations={[0, 1.0]}  colors= 
                    {['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']} 
                    style={styles.linearGradient}>
      </LinearGradient>
 </Image>

styles.linearGradient = {
 ...,
 position:'absolute',
 width:'100%',
 height:'100%'
}

这篇关于如何在React Native iOS中对图像进行透明渐变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！