Qual è il modo migliore per aggiungere un'immagine di sfondo a schermo intero in React Native

Volevo aggiungere un'immagine a schermo intero alla vista, quindi scrivo questo codice

return (
    <View style={styles.container}>
        <Image source={require('image!egg')}  style={styles.backgroundImage}/>
    </View>
)

e definito lo stile come

var styles = StyleSheet.create({
container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
     flexDirection: 'column',
},
     backgroundImage:{
     width:320,
     height:480,
   }
...

ma in questo modo come dovrei trovare le dimensioni effettive dello schermo dell'iPhone?

Ho visto un'API per accedere a Pixel Density, ma nulla delle dimensioni dello schermo ...

Qualche idea?

Puoi usare lo flex: 1stile su un <Image>elemento per riempire l'intero schermo. È quindi possibile utilizzare una delle modalità di ridimensionamento dell'immagine per fare in modo che l'immagine riempia completamente l'elemento:

<Image source={require('image!egg')} style={styles.backgroundImage} />

Stile:

import React from 'react-native';

let { StyleSheet } = React;

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  }
});

Sono abbastanza sicuro che puoi sbarazzarti <View>dell'involucro della tua immagine e questo funzionerà.

(Questo è stato deprecato ora puoi usare ImageBackground )

È così che l'ho fatto. L'accordo principale era sbarazzarsi delle dimensioni fisse statiche.

class ReactStrap extends React.Component {
  render() {
    return (
      <Image source={require('image!background')} style={styles.container}>
        ... Your Content ...
      </Image>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    // remove width and height to override fixed static size
    width: null,
    height: null,
  }
};

Nota: questa soluzione è vecchia. Si prega di fare riferimento a https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting invece

Prova questa soluzione. È ufficialmente supportato. L'ho appena testato e funziona perfettamente.

var styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    alignSelf: 'stretch',
    width: null,
  }
});

E per usarlo come immagine di sfondo, basta fare quanto segue.

<Image style={styles.backgroundImage}>
  <View>
    <Text>All your stuff</Text>
  </View>
</Image>

Ho provato diverse di queste risposte inutilmente per Android usando la versione di reazione nativa = 0.19.0.

Per qualche motivo, resizeMode nel mio foglio di stile non ha funzionato in modo appropriato? Tuttavia, quando aveva il sytlesheet

backgroundImage: {
flex: 1,
width: null,
height: null,
}

e, all'interno del tag Image, ho specificato resizeMode:

<Image source={require('path/to/image.png')} style= {styles.backgroundImage} resizeMode={Image.resizeMode.sretch}>

Ha funzionato perfettamente! Come accennato in precedenza, è possibile utilizzare Image.resizeMode.cover o contenere pure.

Spero che questo ti aiuti!

Aggiornamento marzo 2018 L'uso di Image è obsoleto, utilizzare ImageBackground

  <ImageBackground 
          source={{uri: 'https://images.pexels.com/photos/89432/pexels-photo-89432.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb'}}
          style={{ flex: 1,
            width: null,
            height: null,
            }}
        >
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Your Contents</Text>
       </View>

 </ImageBackground >

Sulla base di Braden Rockwell Napier 's risposta , ho fatto questo BackgroundImagecomponente

BackgroundImage.js

import React, { Component } from 'react'
import { Image } from 'react-native'

class BackgroundImage extends Component {
  render() {
    const {source, children, style, ...props} = this.props
    return (
      <Image source={ source }
             style={ { flex: 1, width: null, height: null, ...style } }
             {...props}>
        { children }
      </Image>
    )
  }
}
BackgroundImage.propTypes = {
  source: React.PropTypes.object,
  children: React.PropTypes.object,
  style: React.PropTypes.object
}
export default BackgroundImage

someWhereInMyApp.js

 import BackgroundImage from './backgroundImage'
 ....
 <BackgroundImage source={ { uri: "https://facebook.github.io/react-native/img/header_logo.png" } }>
    <Text>Test</Text>
 </BackgroundImage>

AGGIORNA a ImageBackground

Dal momento che l'utilizzo <Image />come contenitore è deprecato per un po ', in realtà tutte le risposte mancano di qualcosa di importante. Per un uso corretto, scegliere <ImageBackground />con style e imageStyle prop. Applica tutti gli stili di immagine rilevanti a imageStyle.

Per esempio:

<ImageBackground
    source={yourImage}
    style={{
      backgroundColor: '#fc0',
      width: '100%', // applied to Image
      height: '100%' 
    }}
    imageStyle={{
      resizeMode: 'contain' // works only here!
    }}
>
    <Text>Some Content</Text>
</ImageBackground>

https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js

Se si desidera utilizzarlo come immagine di sfondo, sarà necessario utilizzare il nuovo <ImageBackground>componente introdotto alla fine di giugno 2017 in v0.46. Supporta la nidificazione mentre<Image> presto non lo farà.

Ecco il riepilogo del commit :

Stiamo rimuovendo il supporto delle viste di nidificazione all'interno del componente. Abbiamo deciso di farlo perché avere questa funzione supporta intrinsinc content sizeil<Image> impossibile; quindi quando il processo di transizione è completo, non sarà necessario specificare esplicitamente la dimensione dell'immagine, che può essere dedotta dalla bitmap effettiva dell'immagine.

E questo è il passaggio n. 0.

è una sostituzione drop-in molto semplice che implementa questa funzionalità con uno stile molto semplice. Per favore, usa invece di se vuoi mettere qualcosa dentro.

Oh Dio Finalmente trovo un ottimo modo per React-Native V 0.52-RC e base nativa:

Il tag del contenuto dovrebbe essere simile al seguente: // ======================================= =======================

<Content contentContainerStyle={styles.container}>
    <ImageBackground
        source={require('./../assets/img/back.jpg')}
        style={styles.backgroundImage}>
        <Text>
            Some text here ...
        </Text>
    </ImageBackground>
</Content>

E il tuo stile essenziale è: // ========================================== ====================

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
backgroundImage:{
    flex : 1,
    width : '100%'
}

Funziona bene amici ... buon divertimento

Da 0.14 questo metodo non funzionerà, quindi ho creato un componente statico che renderà questo semplice per voi ragazzi. Puoi semplicemente incollarlo o fare riferimento come componente.

Questo dovrebbe essere riutilizzabile e ti permetterà di aggiungere altri stili e proprietà come se fosse un <Image />componente standard

const BackgroundImage = ({ source, children, style, ...props }) => {
  return (
      <Image
        source={source}
        style={{flex: 1, width: null, height: null, ...style}}
        {...props}>
        {children}
      </Image>
  );
}

basta incollarlo e quindi puoi usarlo come immagine e dovrebbe adattarsi all'intera dimensione della vista in cui si trova (quindi se è la vista dall'alto riempirà lo schermo.

<BackgroundImage source={require('../../assets/backgrounds/palms.jpg')}>
    <Scene styles={styles} {...store} />
</BackgroundImage>

Fai clic qui per un'immagine di anteprima

Ultimo a partire da ottobre 17 (RN> = .46)

import React from 'react';
import { 
  ...
  ImageBackground,
} from 'react-native';

render() {
  return (
    <ImageBackground source={require('path/to/img')} style={styles.urStyle}>
    </ImageBackground>
  );
}

http://facebook.github.io/react-native/releases/0.49/docs/images.html#background-image-via-nesting

import { ImageBackground } from "react-native";
<ImageBackground
     style={{width: '100%', height: '100%'}}
     source={require('../assets/backgroundLogin.jpg ')}> //path here inside
    <Text>React</Text>
</ImageBackground>

Per gestire questo caso d'uso, puoi usare il <ImageBackground>componente, che ha gli stessi oggetti di scena <Image>, e aggiungere qualunque figlio ad esso desideri sovrapporre su di esso.

Esempio:

return (
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

Per di più: ImageBackground | Reagisci nativo

Si noti che è necessario specificare alcuni attributi di stile di larghezza e altezza.

Devi assicurarti che l'immagine abbia resizeMode = {Image.resizeMode.contain} o {Image.resizeMode.stretch} e impostare la larghezza dello stile dell'immagine su null

<Image source={CharacterImage} style={{width: null,}} resizeMode={Image.resizeMode.contain}/>

La larghezza e l'altezza con valore null non funzionano per me, quindi ho pensato di utilizzare la posizione superiore, inferiore, sinistra e destra e ha funzionato. Esempio:

bg: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        resizeMode: 'stretch',
},

E il JSX:

<Image style={styles.bg} source={{uri: 'IMAGE URI'}} />

(RN> = .46)

il componente non può contenere elementi secondari se si desidera eseguire il rendering del contenuto nella parte superiore dell'immagine, considerare l'utilizzo del posizionamento assoluto.

oppure puoi usare ImageBackground

import React from 'react';
import { 
  ...
  StyleSheet,
  ImageBackground,
} from 'react-native';

render() {
  return (
    
  <ImageBackground source={require('path/to/img')} style={styles.backgroundImage} >
      <View style={{flex: 1, backgroundColor: 'transparent'}} />
      <View style={{flex: 3,backgroundColor: 'transparent'}} >
  </ImageBackground>
    
  );
}

const styles = StyleSheet.create({
  backgroundImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
    },
});

Il modo più semplice per implementare lo sfondo:

<ImageBackground style={styles.container} source={require('../../images/screen_login.jpg')}>
  <View style={styles.logoContainer}>
    <Image style={styles.logo}
      source={require('../../images/logo.png')}
    />
  </View> 
  <View style={styles.containerTextInput}>
    < LoginForm />
  </View>   
</ImageBackground>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //   backgroundColor:"#0984e3"
  },
  containerTextInput: {
    marginTop: 10,
    justifyContent: 'center'
  },

  logoContainer: {
    marginTop: 100,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logo: {
    height: 150,
    width: 150
  }
});

Per me funziona benissimo, ho usato ImageBackground per impostare l'immagine di sfondo:

import React from 'react';
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Image, ImageBackground } from 'react-native';
const App: () => React$Node = () => {
return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={styles.container}> 
      <ImageBackground source={require('./Assets.xcassets/AppBackGround.imageset/2x.png')} style={styles.backgroundImage}>
        <View style={styles.sectionContainer}>
              <Text style={styles.title}>Marketing at the speed of today</Text>
        </View>
      </ImageBackground>
      </View>
    </>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    fontFamily: "-apple-system, BlinkMacSystemFont Segoe UI",
    justifyContent: "center",
    alignItems: "center",
  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover',
    height: '100%',
    width: '100%'
  },
  title:{
    color: "#9A9A9A",
    fontSize: 24,
    justifyContent: "center",
    alignItems: "center",
  },
sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
});

export default App;

nel caso non lo avessi ancora risolto, React Native v.0.42.0 ha resizeMode

<Image style={{resizeMode: 'contain'}} source={require('..img.png')} />

import React, { Component } from 'react';
import { Image, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <Image source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} style={s.backgroundImage} />
    );
  }
}

const s = StyleSheet.create({
  backgroundImage: {
      flex: 1,
      width: null,
      height: null,
  }
});

Puoi provarlo su: https://sketch.expo.io/B1EAShDie (da: github.com/Dorian/sketch-reactive-native-apps )

Documenti: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

Puoi anche usare la tua immagine come contenitore:

render() {
    return (
        <Image
            source={require('./images/background.png')}
            style={styles.container}>
            <Text>
              This text will be on top of the image
            </Text>
        </Image>
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: undefined,
        height: undefined,
        justifyContent: 'center',
        alignItems: 'center',
      },
});

Ho sentito di dover usare BackgroundImage perché in futuro non dovresti essere in grado di annidare il tag Image. Ma non è stato possibile ottenere BackgroudImage per visualizzare correttamente il mio sfondo. Quello che ho fatto è stato annidare la mia immagine all'interno di un tag Visualizza e dare uno stile sia alla vista esterna che all'immagine. Le chiavi stavano impostando la larghezza su null e impostando resizeMode su 'stretch'. Di seguito è il mio codice:

import React, {Component} from 'react';
import { View, Text, StyleSheet, Image} from 'react-native';

export default class BasicImage extends Component {
	constructor(props) {
	  super(props);

	  this.state = {};
	}

	render() {
		return (
			<View style={styles.container}>
	      <Image 
	        source={this.props.source}
	        style={styles.backgroundImage}
	      />
      </View>
		)
	}
}

const styles = StyleSheet.create({   
		container: {
			flex: 1,
			width: null,
			height: null,
			marginBottom: 50
		},
    text: {
    		marginLeft: 5,
    		marginTop: 22,
    		fontFamily: 'fontawesome',
        color: 'black',
        fontSize: 25,
        backgroundColor: 'rgba(0,0,0,0)',
    },
		backgroundImage: {
			flex: 1,
			width: null,
			height: null,
			resizeMode: 'stretch',
		}
});

Usa <ImageBackground>come già detto da antoine129 . L'uso <Image>con i bambini ora è obsoleto.

class AwesomeClass extends React.Component {
  render() {
    return (
      <ImageBackground source={require('image!background')} style={styles.container}>
        <YourAwesomeComponent/>
      </ImageBackground>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
  }
};

Un'altra soluzione semplice:

<Image source={require('../assets/background.png')}
      style={{position: 'absolute', zIndex: -1}}/>

<View style={{flex: 1, position: 'absolute'}}>

  {/*rest of your content*/}
</View>

Ho risolto il mio problema con l'immagine di sfondo usando questo codice.

import React from 'react';
import { StyleSheet, Text, View,Alert,ImageBackground } from 'react-native';

import { TextInput,Button,IconButton,Colors,Avatar } from 'react-native-paper';

class SignInScreen extends React.Component {

    state = {
       UsernameOrEmail  : '',
       Password : '',
     }
    render() {
      return (
             <ImageBackground  source={require('../assets/icons/background3.jpg')} style {styles.backgroundImage}>
              <Text>React Native App</Text>
            </ImageBackground>
          );
    }
  }


    export default SignInScreen;

    const styles = StyleSheet.create({
     backgroundImage: {
      flex: 1,
      resizeMode: 'cover', // or 'stretch'
     }
   });

ImageBackground potrebbe avere dei limiti

In realtà, è possibile utilizzare direttamente e non è obsoleto.

Se vuoi aggiungere un'immagine di sfondo in React Native e vuoi anche aggiungere altri elementi su quella immagine di sfondo, procedi nel seguente modo:

1. Crea una vista contenitore
2. Crea un elemento Immagine con larghezza e altezza del 100%. Ridimensiona anche Modalità: 'Cover'
3. Crea un altro elemento Visualizza in Elemento immagine con posizione: 'assoluto'

Questo è il codice che uso:

import React, { Component } from 'react';
import {Text, View, Image} from 'react-native';
import Screen from '../library/ScreenSize'

export default class MenuScreen extends Component {
    static navigationOptions = {
      header: null
    }
    render() {
        return (
          <View style={{ flex: 1 }}>
            <Image
              style={{
                resizeMode: "cover",
                width: "100%",
                height: "100%",
                justifyContent: "center",
                alignItems: "center",
                opacity: 0.4
              }}
              source={require("../assets/images/menuBackgroundImage.jpg")}
            ></Image>

            <View style={{
                width: Screen.width,
                height: Screen.height * 0.55,
                position: 'absolute',
                bottom: 0}}>
                <Text style={{
                    fontSize: 48
                }}>Glad to Meet You!</Text>
            </View>
          </View>
        );
    }
}

Goditi la programmazione ....

Produzione: