【问题标题】：How to have a transparent gradient over an Image in React Native iOS?如何在 React Native iOS 中对图像进行透明渐变？
【发布时间】：2016-01-30 02:14:52
【问题描述】：

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

和我在寻找原生 iOS 解决方案相比，我做到了，但它有点复杂，我无法在 react native 中实现这个 sn-p

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 作为掩码

【问题讨论】：

实际上我遇到了一个在 iOS 中实现相同结果的工作区，我不得不编辑源代码 BVLinearGradient.m 我用 self.gradientLayer.colors = @[(id)[UIColor colorWithRed:0.0f/255.0f green:0.0f/255.0f blue:0.0f/255.0f alpha:0.80f].CGColor, (id)[UIColor clearColor].CGColor]; 覆盖了 setColors 的设置器

标签： android ios react-native

【解决方案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%'
}

【讨论】：

图片组件不要这样带孩子。
不，Image 组件不能将作为子组件。也没有孩子。
但是<ImageBackground>可以

【解决方案2】：

只需将opacity: 0.5 设置为styles.linearGradient

【讨论】：

【解决方案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)']}
      />
    }
  />
)

安卓：

iOS：

【讨论】：

【解决方案4】：

如果您正在寻找这种类型的实现

              <View
                style={{paddingVertical: 5}}>
                <Image
                  source={{
                    uri: BASE_UPLOAD_URI + item.postimage.large.url,
                  }}
                  style={{
                    width: '100%',
                    height: 200,
                    borderRadius: 7,
                  }}
                  resizeMode="cover"
                />
                <LinearGradient
                  colors={[
                    'black',
                    'white',
                    'white',
                    'white',
                    'white',
                    'white',
                    'white',
                    'black',
                  ]}
                  style={{
                    height: 210,
                    width: '100%',
                    position: 'absolute',
                    opacity: 0.2,
                    top: 0,
                    bottom: 0,
                  }}></LinearGradient>
              </View>

【讨论】：