web-dev-qa-db-fra.com

Quelle est la meilleure façon d’ajouter une image d’arrière-plan en plein écran dans React Native?

Je voulais ajouter une image en plein écran à la vue pour écrire ce code

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

et défini le style comme

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

mais de cette façon, comment suis-je supposé trouver la taille réelle de l'écran de l'iPhone?

J'ai vu une API pour accéder à la densité de pixels, mais rien sur la taille de l'écran ...

Une idée?

javascriptreact-native
127
talpaz

Vous pouvez utiliser le style flex: 1 sur un élément <Image> pour qu'il remplisse tout l'écran. Vous pouvez ensuite utiliser l'un des modes de redimensionnement de l'image pour que l'image remplisse complètement l'élément:

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

Style:

import React from 'react-native';

let { StyleSheet } = React;

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

Je suis sûr que vous pouvez vous débarrasser du <View> qui enveloppe votre image et cela fonctionnera. 

91
Josh

(Obsolète, vous pouvez maintenant utiliser ImageBackground )

Voici comment je l'ai fait. L'affaire principale consistait à supprimer les tailles fixes statiques.

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,
  }
};
164
oronbz

Remarque: cette solution est ancienne. Veuillez vous référer àhttps://facebook.github.io/react-native/docs/images.html#background-image-via-nesting à la place

Essayez cette solution. C'est officiellement supporté. Je viens de le tester et fonctionne parfaitement.

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

Et quant à l’utiliser comme image d’arrière-plan, procédez comme suit.

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

J'ai essayé plusieurs de ces réponses sans succès pour Android en utilisant la version réact-native = 0.19.0. 

Pour une raison quelconque, le resizeMode à l'intérieur de ma feuille de style ne fonctionnait pas correctement? Cependant, quand la feuille de style avait 

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

et, dans la balise Image, j'ai spécifié le resizeMode: 

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

Cela a fonctionné parfaitement! Comme mentionné ci-dessus, vous pouvez utiliser Image.resizeMode.cover ou contenir également.

J'espère que cela t'aides! 

19
Tab

Sur la base de Braden Rockwell Napier 's answer , j'ai créé ce composant BackgroundImage

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>
11
Ryan Wu

Si vous souhaitez l'utiliser comme image d'arrière-plan, vous devez utiliser le nouveau composant <ImageBackground>introduit fin juin 2017 dans la version 0.46. Il supporte l'imbrication alors que <Image> ne le sera bientôt pas.

Voici le résumé de commit :

Nous supprimons la prise en charge des vues imbriquées dans le composant. Nous avons décidé de le faire parce que cette fonctionnalité rend la prise en charge intrinsinc content size du <Image> impossible; alors quand le processus de transition est terminé, il ne sera pas nécessaire de spécifier l'image taille explicitement, il peut être déduit de l'image bitmap réelle.

Et c'est l'étape # 0.

est très simple remplacement de remplacement qui implémente cette fonctionnalité via un style très simple. Veuillez utiliser au lieu de si vous voulez mettre quelque chose à l'intérieur.

11
antoine129

Oh mon Dieu Enfin, je trouve un excellent moyen de réagir pour React-Native V 0.52-RC et native-base:

Votre balise de contenu devrait ressembler à ceci: // =================================== ==========================

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

Et votre style essentiel est: // ===================================== ========================

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

Ça marche bien les amis ... amusez-vous 

8
Ali Esfandiari

Update 2018 - L'utilisation de Image est obsolète, utilisez 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 >
6
Hitesh Sahu

UPDATE to ImageBackground

Étant donné que l'utilisation de <Image /> en tant que conteneur est obsolète depuis un certain temps, toutes les réponses manquent en réalité un élément important. Pour une utilisation correcte, choisissez <ImageBackground /> avec styleetimageStyle prop. Appliquez tous les styles d'image pertinents à imageStyle.

Par exemple:

<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

5
Pawel

Dernière en date du 17 octobre _ {(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

4
Adesh Shah

Comme 0.14 cette méthode ne fonctionnera pas, j'ai donc construit un composant statique qui simplifiera la tâche pour vous. Vous pouvez simplement coller ceci ou le référencer en tant que composant. 

Cela devrait être réutilisable et cela vous permettra d'ajouter des styles et propriétés supplémentaires comme s'il s'agissait d'un composant <Image /> standard

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

collez-le simplement et vous pourrez l’utiliser comme image. Il s’agira bien de la taille de la vue (si elle est en vue de dessus, elle remplira votre écran).

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

Cliquez ici pour une image de prévisualisation

3
Braden Rockwell Napier

Vous devez vous assurer que votre image a resizeMode = {Image.resizeMode.contain} ou {Image.resizeMode.stretch} et définir la largeur de style d'image sur null.

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

Utilisez <ImageBackground> comme déjà dit par antoine129 . Utiliser <Image> avec des enfants est obsolète maintenant.

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

var styles = StyleSheet.create({
  container: {
    flex: 1,
  }
};
1
Aung Myat Hein
 import { ImageBackground } from "react-native";
 <ImageBackground
      style={{width: '100%', height: '100%'}}
          source={require('../assets/backgroundLogin.jpg ')}> //path here inside
          <Text>React</Text>
        </ImageBackground>
1
Naved Khan

La largeur et la hauteur avec la valeur null ne fonctionnent pas pour moi, alors j'ai pensé utiliser les positions haut, bas, gauche et droite et ça a marché ...

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

Et le JSX:

<Image style={styles.bg} source={{uri: 'IMAGE URI'}} />
1
dap1995
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,
  }
});

Vous pouvez l'essayer à l'adresse: https://sketch.expo.io/B1EAShDie (à partir de: github.com/Dorian/sketch-reactive-native-apps )

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

1
Dorian

Vous pouvez également utiliser votre image en tant que conteneur:

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',
      },
});
1
Agu Dondo

si vous ne l’avez pas encore résolu, React Native v.0.42.0 a resizeMode

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

(RN> = .46) 

le composant ne peut pas contenir d'enfants si vous souhaitez afficher le contenu en haut de l'image, envisagez d'utiliser le positionnement absolu.

ou vous pouvez utiliserImageBackground

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

1
Hamid Reza Salimian

Le moyen le plus simple d'implémenter l'arrière-plan:

<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
  }
});
1
Ahmad Sadiq

J'ai entendu parler de l'utilisation de BackgroundImage parce qu'à l'avenir, vous êtes supposé ne pas pouvoir imbriquer la balise Image. Mais je ne pouvais pas obtenir BackgroudImage d'afficher correctement mon fond. Ce que j'ai fait est d'imbriquer mon image dans une balise View et de styliser à la fois la vue externe et l'image. Les clés définissaient la largeur sur null et le paramètre resizeMode sur 'stretch'. Ci-dessous mon code:

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

1
Chris Adams

J'ai résolu mon problème d'image d'arrière-plan en utilisant ce code.

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'
     }
   });
0
Adeel Ahmed

Une autre solution facile:

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

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

  {/*rest of your content*/}
</View>
0
Serdar Değirmenci