web-dev-qa-db-fra.com

ImageBackground ResizeMode

J'ai récemment mis à jour React-native et il 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 constituera une erreur dans un avenir proche. Veuillez reconsidérer la mise en page ou utiliser <ImageBackground> à la place.

Le problème est lorsque j'utilise le composant ImageBackground à la place, il me donne un avertissement que vous ne pouvez pas utiliser le style ResizeMode avec lui.

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

Et l'avertissement:

Avertissement: type d'accessoire ayant échoué: clé d'access.style non valide 'resizeMode' fournie à 'View'. Objet incorrect: {ResizeMode: 'contain, height: 25, width: 25}

Comment êtes-vous censé utiliser ImageBackgrounds? Il ne semble pas y avoir de documentation à ce sujet en ligne.

javascriptimagereact-nativejsx
8
Waltari

ImageBackground accepte deux accessoires 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 de conteneur sont appliquées automatiquement au style d'image. Pour plus de détails, visitez this .

18
tahir mahmood

Bouge le resizeMode: 'contain' en dehors de l'inline style.

exemple:

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

J'avais exactement ce problème; J'ai fini par abandonner <ImageBackground> et a recommencé à utiliser <Image> mais a supprimé les éléments à l'intérieur. J'ai ensuite enveloppé le tout dans un nouveau <View> tag et positionné le <Image> absolument dans les styles. Voici où mon code s'est retrouvé s'il est 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'
  },
1
Sternjobname