android - 如何在 React Native iOS 中对图像进行透明渐变？

Question

我一直在处理具有黑色和透明边的图像上的渐变矩形，我一直在寻找 React Native 中的渐变对象但我没有找到，但是有一个 React-Native 模块这样做，但问题是它在 android 中确实有效，但在 iOS 中，它不起作用，它显示白色而不是透明的一面

比起我在寻找原生 iOS 解决方案，我做了，但它有点复杂，我无法在 React Native 中实现这个 fragment

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 

这是我的 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 作为 mask 传递给 Image

Answer 1

尝试positioning LinearGradient absolute 添加样式到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%'
}