Comment utiliser ImageBackground pour définir l'image d'arrière-plan de l'écran en react-native ?

Question

Lorsque je l'utilise dans react-native, il donne un avertissement que l'utilisation avec les enfants est dépréciée et sera une erreur à l'avenir. Utilisateur plutôt.

Donc, Si je l'utilise, il ne donne pas le résultat attendu que j'obtenais en utilisant

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',

},}

Answer 1

Vous pouvez utiliser "ImageBackground" sur React Native.

<ImageBackground
  source={yourSourceFile}
  style={{width: '100%', height: '100%'}}
> 
    <....yourContent...>
</ImageBackground>

Answer 2

J'ai atteint cet objectif 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 
},

Answer 3

Deux options :

1. Essayez de régler la largeur et la hauteur sur la largeur et la hauteur de l'écran de l'appareil.
2. Bonne vieille position absolue

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>
    )
}

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

Edit 2 : Gardez à l'esprit que l'option #2 rend l'image et ensuite tout ce qui suit dans cet ordre, ce qui signifie que certains pixels sont rendus deux fois, cela pourrait avoir un très petit impact sur les performances (généralement imperceptible) mais juste pour votre information.

Answer 4

ImageBackground est un composant très simple et très utile, que vous placerez à l'intérieur de l'application ImageBackground en tant que composant imbriqué et modifiez la position de votre composant à l'aide de la fonction 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>

Answer 5

     <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 de fond dans react native.