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

lxkprmvk 于 2023-04-07 发布在 React

关注(0)|答案(4)|浏览(213)

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

然后我在寻找一个原生的iOS解决方案，我做了，但它有点复杂，我不能在react native中实现这个片段

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作为掩码传递给Image

react-native

来源：https://stackoverflow.com/questions/35097220/how-to-have-a-transparent-gradient-over-an-image-in-react-native-ios

4条答案

按热度按时间

z5btuh9x1#

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

赞(0）回复(0）举报 2023-04-07

mo49yndu2#

只需为styles.linearGradient设置opacity: 0.5

赞(0）回复(0）举报 2023-04-07

hkmswyz63#

你可以使用我的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：

赞(0）回复(0）举报 2023-04-07

vmdwslir4#

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

<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>

包安装npm i react-native-linear-gradient

赞(0）回复(0）举报 2023-04-07

我来回答

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

4条答案

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

相关问题

热门标签

最新问答