我一直在处理具有黑色和透明边的图像上的渐变矩形,我一直在寻找 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
最佳答案
尝试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%'
}
关于android - 如何在 React Native iOS 中对图像进行透明渐变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35097220/