ImageBackground ResizeMode

Question

J'ai récemment mis à jour React-native et cela a introduit un avertissement, avec le code suivant :

 <Image
      source={require('../../assets/icons/heart.png')}
      style={{
        resizeMode: 'contain',
        height: 25,
        width: 25
      }}
    >
      <Text>foobar</Text>
    </Image>

Et l'avertissement :

index.ios.bundle:50435 L'utilisation de <Image> avec des enfants est obsolète et sera sera une erreur dans un futur proche. Veuillez reconsidérer la mise en page ou utilisez <ImageBackground> à la place.

Le problème est que lorsque j'utilise le composant ImageBackground à la place, un avertissement m'indique que je ne peux pas utiliser le style ResizeMode avec ce composant.

 <ImageBackground
      source={require('../../assets/icons/heart.png')}
      style={{
        resizeMode: 'contain',
        height: 25,
        width: 25
      }}
    >
      <Text>foobar</Text>
    </ImageBackground>

Et l'avertissement :

Avertissement : Echec du type de prop : Clé props.style 'resizeMode' non valide fournie à 'View'. Mauvais objet : { ResizeMode : 'contain, height : 25, largeur : 25}

Comment utiliser ImageBackgrounds ? Il ne semble pas y avoir de documentation à ce sujet en ligne.

Answer 1

ImageBackground accepte deux props de style - style et imageStyle - qui sont (évidemment) appliqués respectivement à la vue interne et à l'image. Il convient également de noter que les valeurs de hauteur et de largeur du style du conteneur sont automatiquement appliquées au style de l'image. Pour plus de détails, consultez ce .

Answer 2

Déplacez le resizeMode: 'contain' en dehors de la ligne style .

exemple :

   <ImageBackground
          source={require('../../assets/icons/heart.png')}
          resizeMode= 'contain'
          style={{
            height: 25,
            width: 25
          }}
        >
        <Text>foobar</Text>
    </ImageBackground>

Answer 3

J'ai eu exactement le même problème ; j'ai fini par renoncer à <ImageBackground> et est revenu à l'utilisation de <Image> mais a retiré les éléments qui s'y trouvaient. J'ai ensuite enveloppé le tout dans un nouveau fichier <View> et a positionné la balise <Image> absolument dans les styles. Voici où mon code a abouti, si cela peut vous être utile :

JSX

render() {
    return (
      <View style={{ alignItems: 'center' }}>
        <Image
          source={require('../images/pages/myImage.jpg')}
          style={styles.backgroundImage}
        />

Style

const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');

const styles = StyleSheet.create({

  backgroundImage: {
   flex: 1,
   position: 'absolute',
   resizeMode: 'cover',
   width: viewportWidth,
   height: viewportHeight,
   backgroundColor: 'transparent',
   justifyContent: 'center',
   alignItems: 'center'
  },