React image native de .png est pixélisée et non hd

Question

Je suis en train d'afficher une icône .png dans mon React application native, sur Android pour le moment, en utilisant le code ci-dessous

<Image 
    style={styles.wtrhIcon} 
    source={{uri: "clearmoon"}}/> 

et le style pour elle

wtrhIcon: { 
width: 96, 
height: 96, 
} 

C'est comment il est rendu

La grande lune s semble être pixélisé et ne montre pas en hd. L'image png réelle est 96x96, la largeur et la hauteur exactes définies dans le style pour cela. J'ai toutes les images png dans android/app/src/main/res/(dessinable, dessinable-xhdpi, mipmap-hdpi, mipmap-mdpi, mipamp-xhdpi, mipmap-xxhdpi) et je rencontre le même problème peu importe quelle image 96x96 j'ai choisi.

Les plus petites icônes en bas semblent être affichées sous forme de disque dur, je devine parce que la taille est beaucoup plus petite. Donc, ma question est la suivante: pourquoi la grande image est-elle pixélisée lorsque la hauteur et la hauteur qui y sont définies sont les mêmes que l'image png actuelle?

Answer 1

L'image réelle est .png 96x96,

C'est 96 x 96 pixels .

la largeur et la hauteur exactes définies dans le style pour cela.

C'est 96 x 96 unités de taille. Ces unités peuvent être beaucoup plus grandes qu'un pixel d'écran physique réel (dans ce cas 4 fois plus grand) et dépendent de la densité de pixels de l'écran. Voir la réponse à this question pour plus d'informations.

Si vous mesurez la taille réelle de la lune dans cette image, elle est d'environ 375 x 375 pixels. Il est multiplié par un facteur de 4 donc il semble flou. Vous avez juste besoin d'utiliser des images plus grandes.

Answer 2

La façon germane que je suis est:

Il semble que vous utilisez la grande image et d'essayer de l'utiliser comme une petite image, ce qui doit être fait est:

ajouter resizeMode: 'contain' and flex: 1 dans l'objet de style d'image .

Le resizeMode: « contenir » contribue à l'échelle l'image de manière uniforme (maintenir le ratio d'aspect de l'image), de sorte que les deux dimensions (largeur et hauteur) de l'image sera égale ou inférieure à la dimension correspondante de la vue (moins rembourrage).

cheers :)