web-dev-qa-db-fra.com

React Native 0.57.x <Image /> grandes images de basse qualité

La qualité est vraiment médiocre lors du chargement d'images volumineuses, même avec resizeMethod="resize". Ceci ne se produit que sur Android, pas sur un simulateur/périphérique iOS. Je l'ai testé sur l'émulateur Android 8.1 et sur LG G6 avec Android 8.0. S'il vous plaît voir les captures d'écran ci-dessous.

Sur la capture d'écran de gauche, nous voyons exactement le même code fonctionner avec RN 0.56.0 et sur la capture d'écran de droite, RN 0.57.5. Le code est juste une image simple <Image source={require('./assets/ELHall1.png')} resizeMethod="resize" /> et la taille de l'image est 2111 x 4645 pixels. Les deux projets sont fraîchement installés en utilisant react-native init RN057ImageTest et react-native init --version="0.56.0" RN056ImageTest.

Application simple avec une image

...
type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        {/*<Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>*/}
        <Image source={require('./assets/ELHall1.png')} resizeMethod="resize" />
      </View>
    );
  }
}
...

J'ai créé un numéro de Github to RN repo depuis septembre mais personne n’a répondu, ce qui me fait penser que je fais quelque chose de mal. Existe-t-il un nouvel accessoire ou un autre moyen de rendre les images de grande taille normales avec une qualité optimale dans RN 0.57.x? Peut-être que les mises à jour de metr obuilder vers 0.57.x ont modifié la manière dont l'assembleur gère les actifs de l'image? J'ai utilisé resizeMethod prop pour "scale" et "resize" sans aucune différence. J'ai utilisé PNG8, PNG24 et PNG32 tous les mêmes résultats.

MODIFIER

Le Github repo avec le code et les fichiers d’image PNG: https://github.com/clytras/RN057ImageTest

S'il vous plaît ne donnez aucune réponse à propos des images JPEG et qu'elles fonctionnent, je sais déjà que ; Je souhaite que les images PNG fonctionnent comme dans RN 0.56.

androidreactjsreact-nativecomponentsbundler
6
Christos Lytras

La plupart du temps, ce sont les dimensions de l'image qui importent. Les concepteurs d'interface utilisateur conçoivent des dessins sur des téléphones mobiles haut de gamme (avec une taille d'écran fixe) et exportent les images au format .png en résolutions xhdpi, xxhdpi et xxxhdpi. Les développeurs renomment donc ces images en ajoutant @ 1x, @ 2x et @ 3x à ces résolutions. Exemple: ELHall1@1x ,ELHall1@2x, ELHall1@3x.

Lors de l'importation d'images, utilisez le nom standard de l'image. Example: ELHall1.png.

Pour contourner la balise <Image>, j'utilise l'aide de l'API Dimension de React-Native pour définir automatiquement la largeur et la hauteur de l'image, la plupart du temps.

Exemple: var {height, width} = Dimensions.get('window');

Par exemple, si l'image doit couvrir tout l'écran, je le ferais,

 <View style={{flex:1,width:"100%",height:"100%"}}>
    <Image style={{width:width, height:height}} source={require('./assets/ELHall1.png')}  /> 
    // width & height is auto taken using Dimension API
    // To play around pixels use resizeMode= ("contain","center") (Keep this as last option)
  </View>

J'espère que je pourrais vous aider.

2
Ron

J'ai testé FastImage et la qualité était meilleure

<FastImage source={require('./assets/ELHall1.png')} style={{height: '100%', aspectRatio: 2.5}} />
0
SiSa

Utilisez plutôt "ImageBackground" pour les grandes images.

import {
  ImageBackground,
} from 'react-native';


<ImageBackground source={require('./assets/ELHall1.png')} style={{width: '100%', height: '100%'}}></ImageBackground>
0
CodeYute