简体   繁体   中英

LinearGradient above ImageBackground in react-native expo

In my react-native expo app, i have a background image that is taking full height and width in all screens and i want to put a lineargradient above the background image but it's not working, the image is always appearing above the gradient, here is the code:

    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;

Try to put LinearGradient component inside ImageBackground.

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

Add absolute position on the LinearGradient :

<LinearGradient
   colors={['#4c669f', '#3b5998', '#192f6a']}
   style={{
      position: 'absolute',
      left: 0,
      right: 0,
      top: 0,
      height: '100%'
   }}
/>

This worked for me:

<ImageBackground
  source={require('../../assets/img/background.png')}
  resizeMode="cover"
  style={{
    height: '100%',
    width: '100%',
    flex: 1,
  }}>
  <LinearGradient
    colors={[
      'rgba(255,180,113,0.75)',
      'rgba(255,107,11,0.75)',
      'rgba(255,180,113,0.75)',
    ]}
    style={{flex: 1, justifyContent: 'center'}}>

    {** CODE **}

  </LinearGradient>
</ImageBackground>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM