Reactjs 如何使用gl react native实现此效果？

我试图将效果应用于背景图像（见左图），以创建您在右侧看到的效果

我已经试着使用和堆叠每一层，例如

return (
  <View>
    <Image style={styles.container} source={require('../../assets/slides/pioneer-party.jpg')} />
    <LinearGradient
        start={{x: 0.0, y: 0.0}} end={{x: 1.0, y: 1.0}}
        locations={[0,0.25,0.5,0.75,1]}
        colors={['#692eff', '#642cf4', '#602ae9', '#5224c8', '#5e29e5']}
        style={styles.contentContainer}
      >
      <LinearGradient
        colors={['rgba(13,105,255,0)', '#0069ff']}
        style={styles.contentContainer2}
      >
      </LinearGradient>
    </LinearGradient>
  </View>
)

返回(
)

它没有达到我想要的效果。然后我看了一眼gl react颜色混合。我无法使blendMode与LinearGradient一起工作。我和作者开了一个网站，但他也不知道怎么做，但他相信用gl react可以做到

我已经在ReactiFlux上问过了，但似乎没有人知道怎么做

我不知道如何堆叠层/组件，以便它们可以实现这种视觉效果

是否有人有Gl React的经验，并能为我指出正确的方向

谢谢

更新：

谢谢你的建议。我已更新代码：（请随意删除包装线argradient）

import React，{Component}来自'React'；
进口{
平台，
样式表，
文本，
看法
可触摸不透明度，
尺寸，
形象,，
平面列表，
异步存储，
文本输入，
活动指示器，
滚动视图，
图像背景
}从“反应本机”；
从“反应本机图像梯度”导入ImageGradient；
从“反应本机线性渐变”导入LinearGradient；
从“../../utils/metrics”导入度量
导出默认类示例扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
宽度：metrics.DEVICE\u宽度，
高度：metrics.DEVICE\u高度，
resizeMode:'cover'、//或'stretch'
},
坡度：{
宽度：metrics.DEVICE\u宽度，
高度：metrics.DEVICE\u高度，
},
});

这与我所追求的效果非常接近：

您认为可以使用混合模式将柔和灯光应用于图像吗？最终这就是我的设计师所追求的。

你能试试这个吗

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
  Image,
  FlatList,
  AsyncStorage,
  TextInput,
  ActivityIndicator,
  ScrollView,
  ImageBackground
} from 'react-native';
import { ListItem, Left, Body, Right, Title } from "native-base";
import ImageGradient from 'react-native-image-gradient';
import LinearGradient from 'react-native-linear-gradient';


const window = Dimensions.get('window');

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});





  render() {
    return (
      <View style={styles.container}>
         <ImageGradient 
            mainStyle={styles.YOURS}
            gradientStyle={styles.YOURS}
            localImage={false}
            imageUrl={'http://auraypantin.fr/wp-content/uploads/2013/12/PICT0534.jpg'}
            startPosition ={{x:0,y:0}}
            rgbcsvStart={'255,255,255'}
            rgbcsvEnd={'0,0,0'}
            opacityStart={0.9}
            opacityEnd={0.0}
        >
        </ImageGradient>
      </View>
    );
  }
}

const styles = StyleSheet.create({

 container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  gradient: {
    width: 200,
    height: 200,
  },
});

/**
*示例React本机应用程序
* https://github.com/facebook/react-native
*@flow
*/
从“React”导入React，{Component}；
进口{
平台，
样式表，
文本，
看法
可触摸不透明度，
尺寸，
形象,，
平面列表，
异步存储，
文本输入，
活动指示器，
滚动视图，
图像背景
}从“反应本机”；
从“本机基”导入{ListItem，左，正文，右，标题}；
从“反应本机图像梯度”导入ImageGradient；
从“反应本机线性渐变”导入LinearGradient；
const window=Dimensions.get（'window'）；
const指令=Platform.select({
ios:'按Cmd+R重新加载，\n'+
“用于开发菜单的Cmd+D或shake”，
android:“双击键盘上的R以重新加载，\n”+
'为开发菜单摇动或按下菜单按钮'，
});
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
坡度：{
宽度：200，
身高：200，
},
});

通过改变不透明度也可以匹配它。检查屏幕截图：好的。因此，您建议更改图像的不透明度，然后可能会更改其上的渐变以更接近设计。我会尝试一下，谢谢。希望如此，让我知道它是否有效，或者会尝试其他方法。谢谢@Pramod-我将把你的答案标记为正确。尽管我的设计师坚持使用blendmodes，但我使用RN无法做到这一点。（有趣的是，弗利特把它从盒子里拿了出来。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
  Image,
  FlatList,
  AsyncStorage,
  TextInput,
  ActivityIndicator,
  ScrollView,
  ImageBackground
} from 'react-native';
import { ListItem, Left, Body, Right, Title } from "native-base";
import ImageGradient from 'react-native-image-gradient';
import LinearGradient from 'react-native-linear-gradient';


const window = Dimensions.get('window');

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});





  render() {
    return (
      <View style={styles.container}>
         <ImageGradient 
            mainStyle={styles.YOURS}
            gradientStyle={styles.YOURS}
            localImage={false}
            imageUrl={'http://auraypantin.fr/wp-content/uploads/2013/12/PICT0534.jpg'}
            startPosition ={{x:0,y:0}}
            rgbcsvStart={'255,255,255'}
            rgbcsvEnd={'0,0,0'}
            opacityStart={0.9}
            opacityEnd={0.0}
        >
        </ImageGradient>
      </View>
    );
  }
}

const styles = StyleSheet.create({

 container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  gradient: {
    width: 200,
    height: 200,
  },
});