web-dev-qa-db-de.com

Reagieren Sie nativ 0.57.x <Image /> große Bilder mit niedriger Qualität

Beim Laden großer gebündelter Bilder ist die Qualität wirklich schlecht, selbst wenn resizeMethod="resize" verwendet wird. Dies geschieht nur auf Android, nicht auf einem iOS-Simulator/Gerät. Habe es auf Android 8.1-Emulator und LG G6 mit Android 8.0 getestet. Bitte sehen Sie die Screenshots unten.

Auf dem linken Screenshot sehen wir genau den gleichen Code, der mit RN 0.56.0 läuft, und auf dem rechten Screenshot sehen wir RN 0.57.5. Der Code ist nur ein einfaches Bild <Image source={require('./assets/ELHall1.png')} resizeMethod="resize" /> und die Bildgröße ist 2111 x 4645 pixels. Beide Projekte werden mit react-native init RN057ImageTest und react-native init --version="0.56.0" RN056ImageTest neu installiert.

Einfache App mit einem Bild

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

Ich habe seit September ein Github-Problem für RN-Repo erstellt, aber niemand hat geantwortet, was mich zu dem Gedanken bringt, dass ich etwas falsch mache. Gibt es eine neue Requisite oder eine andere Möglichkeit, große Bilder mit voller Qualität in RN 0.57.x normal darzustellen? Möglicherweise haben die Aktualisierungen für metr obuilder auf 0.57.x geändert, wie der Bundler mit den Image-Assets umgeht. Ich habe resizeMethod prop für "scale" und "resize" ohne Unterschied verwendet. Ich habe PNG8, PNG24 und PNG32 alle das gleiche Ergebnis verwendet.

EDIT

Das Github-Repo mit dem Code und den PNG-Bilddateien: https://github.com/clytras/RN057ImageTest

Bitte geben Sie keine Antworten zu JPEG-Bildern und dass sie funktionieren, ich weiß das schon ; Ich möchte, dass PNG-Bilder wie in RN 0.56 funktionieren.

androidreactjsreact-nativecomponentsbundler
6
Christos Lytras

Meistens sind es die Dimensionen des Bildes, die von UI-Designern erstellt werden. Sie erstellen Designs zu Standard-High-End-Mobiltelefonen (mit fester Bildschirmgröße) und exportieren die Bilder als .png-Auflösungen in xhdpi, xxhdpi und xxxhdpi. Entwickler benennen diese Bilder um, indem sie @ 1x, @ 2x & @ 3x an diese Auflösungen anhängen. Beispiel: [email protected] ,[email protected], [email protected].

Verwenden Sie beim Importieren von Bildern den Standardnamen des Bildes. Example: ELHall1.png.

Zur Problemumgehung <Image>-Tag verwende ich die Hilfe von Dimension-API in React-Native, um die Breite und Höhe des Image meistens automatisch festzulegen.

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

Wenn das Bild beispielsweise den gesamten Bildschirm abdecken muss, würde ich Folgendes tun:

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

Ich hoffe, ich konnte dir helfen.

2
Ron

Ich habe FastImage getestet und hatte eine bessere Qualität

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

Verwenden Sie stattdessen "ImageBackground" für große Bilder.

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


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