web-dev-qa-db-fra.com

Comment utiliser ImageBackground pour définir une image d’arrière-plan pour l’écran dans react-native.

Lorsque j'utilise in react-native, cela indique que l'utilisation avec des enfants est obsolète et entraînera une erreur à l'avenir. Utilisateur à la place.

Donc, Si je l’utilise, le résultat escompté n’est pas celui escompté 

Voici le code que j'ai écrit pour utiliser 

<ImageBackground source={require('../../img/splash/splash_bg.png')} style={styles.backgroundImage} >
        </ImageBackground>

Et le code de style est 

const styles = StyleSheet.create({
backgroundImage: {
    flex: 1,
    // width: undefined,
    // height: undefined,
    // flexDirection: 'column',
    // backgroundColor:'transparent',
    // justifyContent: 'flex-start',


},}

 Expected result: getting when using <Image>  Result using <ImageBackground>

Toute aide serait très appréciée . Merci

react-native
22
Waqas

Maintenant RN ont "ImageBackground" composant.

<ImageBackground
  source={yourSourceFile}
  style={{width: '100%', height: '100%'}}
> 
    <....yourContent...>
</ImageBackground>
45
Tiago Gouvêa

j'ai réalisé ceci en:

import { ImageBackground ] from 'react-native';

<ImageBackground style={ styles.imgBackground } 
                 resizeMode='cover' 
                 source={require('./Your/Path.png')}>

   //place your now nested component JSX code here

</ImageBackground>

Et puis les styles:

imgBackground: {
        width: '100%',
        height: '100%',
        flex: 1 
},
8
BLDD

Voici un lien vers la documentation RN: https://facebook.github.io/react-native/docs/images

Une demande de fonctionnalité commune à des développeurs familiarisés avec le Web est background-image. Pour gérer ce cas d'utilisation, vous pouvez utiliser le composant <ImageBackground>, qui a les mêmes propriétés que <Image>, et ajouter les enfants que vous souhaitez y superposer.

Il se peut que vous ne souhaitiez pas utiliser <ImageBackground> dans certains cas, car sa mise en œuvre est très simple. Reportez-vous au code source de <ImageBackground> pour plus d'informations et créez votre propre composant personnalisé si nécessaire.

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

Notez que vous devez spécifier certains attributs de style width et height.

Notez également que le chemin du fichier est relatif au répertoire dans lequel se trouve le composant.

1
agm1984

ImageBackground est un composant très simple et utile. Placez votre composant dans ImageBackground en tant que composant imbriqué et ajustez une position de votre composant à l'aide de position.

Voici un exemple.

<ImageBackground
  source={{ uri: hoge }}
  style={{
    height: 100,
    width: 100,
    position: 'relative', 
    top: 0,
    left: 0
  }}
>
  <Text
    style={{
      fontWeight: 'bold',
      color: 'white',
      position: 'absolute', 
      bottom: 0, 
      left: 0
    }}
  >
    Hello World
  </Text>
</ImageBackground>

1
chansuke

Deux options: 

  1. Essayez de régler largeur et hauteur en largeur et en hauteur sur l'écran de l'appareil.
  2. Bon vieux poste absolu

Code pour # 2: 

 render(){
    return(
        <View style={{ flex: 1 }}>
           <Image style={{ width: screenWidth, height: screenHeight, position: 'absolute', top: 0, left: 0 }}/>
           <Text>Hey look, image background</Text>
        </View>
    )
}

Edit : Pour l'option 2, vous pouvez expérimenter avec resizeMode="stretch|cover"

Edit 2 : N'oubliez pas que l'option n ° 2 restitue l'image puis tout dans cet ordre, ce qui signifie que certains pixels sont restitués deux fois, ce qui pourrait avoir un impact très faible sur les performances (généralement inaperçu) mais juste pour votre information

1
Alexander Vitanov
     <ImageBackground
            source={require("../assests/background_image.jpg")}
            style={styles.container}

        >
            <View
                style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center"
                }}
            >
                <Button
                    onPress={() => this.props.showImagePickerComponent(this.props.navigation)}
                    title="START"
                    color="#841584"
                    accessibilityLabel="Increase Count"
                />
            </View>
        </ImageBackground>

Veuillez utiliser ce code pour définir l’image d’arrière-plan dans réagit natif

1
Ajith V M

Pour ajouter une image d'arrière-plan, React Native est basé sur le composant, le composant ImageBackground requiert deux accessoires style = {{}} et source = {require ('')} 

 <ImageBackground source={require('./wallpaper.jpg')} style={{width: '100%', height: '100%'}}> 
<....yourContent Goes here...>
    </ImageBackground>
0
Muaath Alhaddad
const { width, height } = Dimensions.get('window')


<View style={{marginBottom: 20}}>
   <Image 
        style={{ height: 200, width: width, position: 'absolute', resizeMode: 'cover' }}
        source={{ uri: 'https://picsum.photos/'+width+'/200/?random' }}
                />
   <View style={styles.productBar}>
       <View style={styles.productElement}>
            <Image
                  style={{ height: 160, width: width - 250, position: 'relative', resizeMode: 'cover' }}
                  source={{ uri: 'https://picsum.photos/'+ 250 +'/160/?random' }}
                        />
       </View>
       <View style={styles.productElement}>
             <Text style={{ fontSize: 16, paddingLeft: 20 }}>Başlık</Text>
             <Text style={{ fontSize: 12, paddingLeft: 20, color: "blue"}}>Alt Başlık</Text>
       </View>
   </View>
</View>



 productBar: {
    margin: 20,
    marginBottom: 0,
    justifyContent: "flex-start" , 
    flexDirection: "row"
  },
  productElement: {
    marginBottom: 0, 
 },

 Screenshot

0
Yakup Ad

Je rencontrais le même problème avec l’image d’arrière-plan et ses composants enfants, y compris les images de logo… Après quelques heures perdues, j’ai trouvé la bonne façon de résoudre ce problème… .. Cela vous a sûrement aidé.

var {View, Text, Image, ImageBackground} = require('react-native');
import Images from '@assets';

export default class Welcome extends Component {
    render() {
        return (
            <ImageBackground source={Images.main_bg} style={styles.container}>
                <View style={styles.markWrap}>
                    <Image source={Images.main_logo} 
                    style={styles.mark} resizeMode="contain" />
                </View>
                <View style={[styles.wrapper]}>
                    {//Here put your other components}
                </View>              

            </ImageBackground>
        );
    }
}

var styles = StyleSheet.create({
    container:{
        flex: 1,
    },
    markWrap: {
        flex: 1,
        marginTop: 83,
        borderWidth:1, borderColor: "green"
      },
    mark: {
        width: null,
        height: null,
        flex: 1,
    },
    wrapper:{
        borderWidth:1, borderColor: "green",///for debug
        flex: 1,
        position:"relative",
    },
}

Logo sur fond Image

(PS: j'ai mis l'image fictive sur cet écran à la place du vrai logo de l'entreprise.) 

0
lingjin.w

Je pense que cela va vous aider ..

import React, { Component } from 'react';
import { homePageStyles } from '../styles/Style';
import { Text, ImageBackground } from 'react-native';
import HomePageWallpaper from '../images/homePageWallpaper.jpg';

export default class Home extends Component {
    render() {
        return (
            <ImageBackground source={HomePageWallpaper} style={{ flex: 1, justifyContent: 'center', width: null, height: null }}>
                <Container>                    
                    <Content>
                        <Text style={homePageStyles.description_text}>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Text>
                    </Content>
                </Container >
            </ImageBackground>
        );
    }
}
0
Ashfaq Hussain
.hero-image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

résultat résultat

0
braiek aymen