LinearGradient над ImageBackground на выставке "Реактив-натив" - PullRequest
Новая
       66

LinearGradient над ImageBackground на выставке "Реактив-натив"

0 голосов
/ 12 ноября 2018

В моем приложении expo-native у меня есть фоновое изображение, которое занимает всю высоту и ширину на всех экранах, и я хочу поместить линейный градиент над фоновым изображением, но оно не работает, изображение всегда появляется над градиентомвот код: 

    import React, { Component } from 'react';
    import { LinearGradeint } from 'expo';
    import { Text, StyleSheet, ImageBackground } from 'react-native';

    class App extends Component {

      render() {

        return(
          <View style={styles.container}>
          <LinearGradient
          colors={['#4c669f', '#3b5998', '#192f6a']}>
            <ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}>
            <View style={{width: "100%"}}>
            <Text>
              HI
            </Text>
          </View>
           </ImageBackground>
          </LinearGradient>
          </View>
        )
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
      backgroundImage: {
        height: '100%',
        width: '100%',
        flex: 1,
      },
    export default App;

1 Ответ

0 голосов
/ 24 декабря 2018

Попробуйте поместить компонент LinearGradient в ImageBackground.

<ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}>
     <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} />
          <View style={{width: "100%"}}>
          </View>
</ImageBackground>
...