如何在React Native iOS中的图像上使用透明渐变？

Question

我一直在处理一个具有黑色和透明边的Image上的渐变矩形，我一直在寻找一个反应原生的渐变对象而我没有找到，但是有一个反应 - 这样做的本机模块，但问题是它在android中的透明度有效，但在iOS中，它不起作用，它显示白色代替透明面

而且我正在寻找一个原生的iOS解决方案，我做了但它有点复杂，而我无法在本机实现这个片段

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作为面具

Answer 1

只需为opacity: 0.5

设置styles.linearGradient即可

Answer 2

尝试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%'
}

Answer 3

您可以使用我的react-native-image-filter-kit库来实现此目的：

import { Image } from 'react-native'
import {
  SrcOverComposition,
  LinearGradient
} from 'react-native-image-filter-kit'

const masked = (
  <SrcOverComposition
    resizeCanvasTo={'dstImage'}
    dstImage={
      <Image
        style={{ width: 320, height: 320 }}
        source={{ uri: 'https://una.im/CSSgram/img/cacti.jpg' }}
      />
    }
    srcResizeMode={{ width: 1, height: 0.5 }}
    srcAnchor={{ y: 0 }}
    srcImage={
      <LinearGradient
        start={{ x: 0, y: 0 }}
        end={{ x: 0, y: '100h' }}
        colors={['rgba(0,0,0,0.80)', 'rgba(0,0,0,0.00)']}
      />
    }
  />
)

Android：

iOS：