Bilder lassen sich einfach zu Ihrer React Native-App hinzufügen. Holen Sie sich alle Ins und Outs der integrierten Image-Komponente.

Bilder sind für mobile Anwendungen von großem Wert. Sie können helfen, Konzepte zu veranschaulichen, Informationen zu vermitteln, visuelles Interesse zu wecken und Kontext für bestimmte Inhalte bereitzustellen, die Ihre App-Benutzer möglicherweise nicht verpassen sollen.

Die React Native Image-Komponente

Die React Native-Bildkomponente ist die Standardkomponente, die von der React Native-Bibliothek bereitgestellt wird, um Bilder in Ihren mobilen Apps zu rendern. Die Komponente kann Bilder sowohl von lokalen als auch von entfernten Quellen laden. Es bietet mehrere Requisiten für die Anpassung und Gestaltung der gerenderten Bilder.

Um die Bildkomponente in Ihrer Anwendung zu verwenden, importieren Sie Bild von dem reagieren-nativ Bibliothek:

importieren Reagieren aus'reagieren';
importieren { Stylesheet, Bild, Ansicht } aus'reaktionsnativ';
konst Anwendung = () =>





instagram viewer

 {
zurückkehren (

 style={styles.image}
 Quelle={erfordern('./assets/mein-bild.jpg')}
 />
 </View>
 );
};
konst Stile = StyleSheet.create({
 Behälter: {
 biegen: 1,
 ausrichtenItems: 'Center',
 begründenInhalt: 'Center',
 },
 Bild: {
 Breite: 200,
 Höhe: 200,
 RandRadius: 100,
 },
});

Oben ist eine einfache App Komponente mit einem Bild. Der Bild Komponente dauert a Stil Prop, der die setzt Breite, Höhe, Und RandRadius des Bildes. Es dauert auch eine Quelle prop, die das Bild aus einer lokalen Datei lädt, die sich im Ordner „assets“ im App-Verzeichnis befindet. Der Quelle prop definiert den Pfad des einzuschließenden Bildes und kann sowohl lokale als auch Netzwerk-/Remote-Bildquellen akzeptieren.

Lokale Bilder sind auf dem Gerät des Benutzers verfügbar und können temporär oder dauerhaft gespeichert werden. Sie können lokale Bilder im Projektverzeichnis der App speichern, z. B. eine Vermögenswerte Ordner. Sie können Bilder auch außerhalb des Verzeichnisses der App finden, z. B. in der Kamerarolle oder Fotobibliothek des Geräts. Hier ist ein Beispiel für einen Quellpfad zu einem lokalen Bild:

uri: 'file:///path/to/my-image.jpg' }} />

Netzwerkbilder werden über das Internet bereitgestellt. Sie könnten HTTP/HTTPS-URLs oder base64-codierte Daten-URIs enthalten, die Daten mithilfe des Base64-Codierungsschemas direkt in die URL einbetten.

Requisiten zum Anpassen der Bildkomponente

Es gibt mehrere Requisiten, mit denen Sie die React Native Image-Komponente gestalten und anpassen können.

resizeMode

Der resizeMode prop bestimmt, wie React die Größe eines Bildes innerhalb seines Containers ändern und positionieren soll. Es gibt mehrere verfügbare Werte für resizeMode, die sich jeweils unterschiedlich auf das Bild auswirken.

  • Abdeckung: Dieser Wert skaliert das Bild gleichmäßig, sodass beide Dimensionen gleich oder größer als das enthaltende Element sind. Das Bild wird dann innerhalb des Containers zentriert. Die Verwendung dieses Werts kann dazu führen, dass das Bild beschnitten wird, um das Seitenverhältnis beizubehalten.
  • enthalten: Dadurch wird versucht, das Bild perfekt in die Abmessungen des Containers einzupassen und zu zentrieren. Dies kann jedoch zu Leerstellen an den Rändern des Bildes führen.
  • strecken: Der strecken -Wert dehnt das Bild so, dass es den gesamten Container ausfüllt, unabhängig vom Seitenverhältnis. Manchmal wird das Bild verzerrt.
  • wiederholen: Dieser Wert wiederholt das Bild sowohl horizontal als auch vertikal, um den gesamten Container auszufüllen.
  • Center: Dadurch wird das Bild im Containerelement zentriert, ohne es zu skalieren.

onLoad

Das ist ein Callback-Funktion die ausgeführt wird, wenn das Bild fertig geladen ist. Sie können es verwenden, um Aktionen auszuführen, nachdem das Bild geladen wurde, wie z. B. das Aktualisieren des Status der Komponente oder das Anzeigen einer Nachricht für den Benutzer.

onError

Der onError prop wird ausgeführt, wenn das Bild nicht geladen werden kann. Es bietet eine Möglichkeit, die erforderlichen Aktionen auszuführen, wenn beim Versuch, das Bild zu laden, ein Fehler auftritt. Sie können dem Benutzer eine Fehlermeldung anzeigen oder erneut versuchen, das Bild zu laden.

defaultSource

Diese Eigenschaft gibt ein Fallback-Bild an, das angezeigt wird, wenn das Hauptbild nicht geladen werden kann. Sie können damit ein Standardbild oder ein Platzhalterbild bereitstellen, während das Hauptbild geladen wird.

Umgang mit Remote-Images von einer API

Möglicherweise müssen Sie das Bild für Ihre Anwendung von einer API oder einem Remote-Server abrufen und es in Ihrer App anzeigen. Sie können das integrierte React verwenden bringen Funktion oder ein API-Anforderungsbibliothek wie Axios für diesen Zweck.

Hier ist ein Beispiel dafür, wie Sie ein Bild von einer Remote-API mithilfe von abrufen und anzeigen bringen Funktion:

konst [imageUri, setImageUri] = useState(Null);
useEffect(() => {
 bringen(' https://example.com/api/images/1')
 .Dann(Antwort => Antwort.json())
 .Dann(Daten => setImageUri (data.url))
 .fangen(Fehler =>Konsole.error (Fehler));
}, []);
zurückkehren (

 {imageUri? (
uri: imageUri }} />
 ): (
Laden...</Text>
 )}
 </View>
);

Wenn Sie diesen Code in Ihrer App ausführen, wird ein Bild von dem festgelegten Remote-API-Link abgerufen. Das Beispiel erstellt zunächst eine Zustandsvariable für die imageUri. Innerhalb eines useEffect Haken, der bringen Funktion ruft den imageUri ab und speichert ihn in der Zustandsvariable using setImageUri().

Schließlich rendert es die Bild Komponente mit der Quelle prop auf den URI des Bildes gesetzt, während ein Ladeindikator angezeigt wird und darauf wartet, dass das Bild angezeigt wird.

Verwenden der Cache-Richtlinien-Prop zum Steuern des Cache-Verhaltens

Ihr Browser kann Bilder zwischenspeichern, die er von Remote-URLs lädt, damit er sie in Zukunft schnell wieder laden kann. Sie können das Verhalten des zwischengespeicherten Bildes mithilfe von anpassen Zwischenspeicher Stütze. Dieses Prop kann angeben, wie ein Browser das Bild zwischenspeichern und diesen Cache ungültig machen soll.

Die Cache-Prop kann Werte wie annehmen Standard, neu laden, Cache erzwingen, Und nur-wenn-gecacht.

Hier ist ein Beispiel für die Verwendung von Zwischenspeicher prop, um das Cache-Verhalten eines Bildes zu steuern:

 Quelle={{
 uri: ' https://example.com/images/my-image.png',
 Zwischenspeicher: 'Force-Cache',
 cacheKey: 'mein Bild',
 unveränderlich: WAHR
 }}
/>

Der Zwischenspeicher Eigenschaft eingestellt ist 'Force-Cache', was darauf hinweist, dass der Browser das Bild aus dem Cache laden soll, falls verfügbar, auch wenn diese Cache-Version alt ist.

Eine neue Requisite cacheKey ist auch hier im Spiel. Es ist eingestellt 'mein Bild', der als benutzerdefinierter Cache-Schlüssel dient, mit dem Sie später auf das zwischengespeicherte Bild verweisen können.

Auch der unveränderlich Eigenschaft eingestellt ist WAHR, die den Browser anweist, diesen Cache-Eintrag als unveränderlich zu behandeln und ihn niemals ungültig zu machen.

Alles über Bilder

Die React Native Image-Komponente bietet ein leistungsstarkes und flexibles Mittel zum Anzeigen von Bildern, einschließlich Styling, Umgang mit Remote-Bildern und Steuern des Cache-Verhaltens.

Für Remote-Bilder können Sie immer einen Platzhalter verwenden, um ein temporäres Bild oder Text anzuzeigen, während das Remote-Bild geladen wird. Dadurch wird eine bessere Benutzererfahrung geschaffen, indem sofortiges visuelles Feedback bereitgestellt und verhindert wird, dass die App nicht reagiert.