如何使用 gl-react-native 实现这种效果？

Question

我正在尝试将效果应用到背景图像（左图）以创建您在右图看到的效果。

我试过使用 LinearGradient 并用它堆叠每一层，例如

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-color-blending。我无法让 blendMode 与 LinearGradient 一起工作。跟作者开了一个issue，他也不知道怎么做，但是相信用gl-react可以做到。

我在 ReactiFlux 上问过，但似乎没有人知道该怎么做。

我不知道如何堆叠 layers/components 才能达到这种视觉效果。

有没有人有使用 Gl React 的经验，可以为我指明正确的方向？

谢谢。

更新：

感谢您的建议。我已经更新了代码：（随意删除包装 LinearGradient）

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
  Image,
  FlatList,
  AsyncStorage,
  TextInput,
  ActivityIndicator,
  ScrollView,
  ImageBackground
} from 'react-native';
import ImageGradient from 'react-native-image-gradient';
import LinearGradient from 'react-native-linear-gradient';
import metrics from '../../utils/metrics'

export default class Example extends Component {

  render() {
    return (
      <LinearGradient
        colors={['rgba(13,105,255,0)', '#0069ff']}
        style={styles.gradient}
      >
        <ImageGradient 
          mainStyle={styles.container}
          gradientStyle={styles.gradient}
          localImage={false}
          imageUrl={'http://uppercase.army/pioneer-party.jpg'}
          startPosition={{x:0,y:0}}
          endPosition={{x:0,y:0.5}}
          rgbcsvEnd={'163,73,255'}
          rgbcsvStart={'6,0,205'}
          opacityStart={0.8}
          opacityEnd={0.7}
        >
        </ImageGradient>
      </LinearGradient>
    );
  }

}

const styles = StyleSheet.create({

 container: {
    width: metrics.DEVICE_WIDTH,
    height: metrics.DEVICE_HEIGHT,
    resizeMode: 'cover', // or 'stretch'
  },
  gradient: {
    width: metrics.DEVICE_WIDTH,
    height: metrics.DEVICE_HEIGHT,
  },
});

非常接近我想要的效果：

您认为可以使用 https://github.com/miklosme/gl-react-color-blending 将柔光混合模式应用于图像吗？因为最终这就是我的设计师所追求的。

Answer 1

你能试试这个吗

/**
 * 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,
  },
});

如何使用 gl-react-native 实现这种效果？

How to achieve this effect using gl-react-native?

reactjs

react-native