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，但似乎没有人知道该怎么做。

我不确定如何堆叠图层/组件以便它们可以实现这种视觉效果。

有没有人有过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实现此效果？

1 个答案: