Nehmen wir an, wir möchten ein Bild aus
dem Internet verwenden. Dazu können Sie einfach eines hier auswählen. Ich mache das mit der Google-Bildsuche. Sagen wir dieses und wir
möchten dieses Bild in unserem Spiel über dem Bildschirm verwenden.
Früher verwenden wir diese erforderliche Syntax, um ein lokales Image zu laden. Jetzt
ist diese Syntax nicht mehr die richtige.
Also dupliziere ich diese Zeile und kommentiere sie für
ein Webbild aus. Stattdessen übergeben Sie ein Objekt an die Quelle und an dieses Objekt übergeben Sie eine URI-Requisite, und diese URI-Requisite enthält eine
Zeichenfolge, die Ihre Verknüpfung zum Bild darstellt.
Ihr Link zum Bild wird also an die URI-Requisite in diesem Objekt übergeben, das Sie an die Quelle übergeben haben.
Wenn Sie dies tun, wird das Bild aus dem Web geladen, aber es gibt eine wichtige Sache, die Sie wissen müssen.
Für das
lokal geladene Bild habe ich
erwähnt, dass React Native seine Breite und Höhe bestimmen kann und dies als Standard verwendet.
Daher müssen Sie für ein lokal geladenes Bild keine Breite und Höhe für das Bild festlegen. Wir tun dies hier, da wir die
Standardbreite und -höhe überschreiben möchten. Wenn Sie jedoch ein Bild hatten, das bereits die perfekte
Größe hat, Sie müssten nicht Breite und Höhe einstellen. Bei Bildern aus dem Web kann React Native
die Breite und Höhe
des Bildes vor dem Laden nicht bestimmen, da es nicht Teil der App ist, aus dem Web stammt,
von React Native heruntergeladen wird und eine
Art Überraschung darstellt die Breite und die Höhe ist. Daher müssen Sie für Netzwerkbilder, also
für Bilder, die
Sie mit einem Link abrufen, immer eine Breite und Höhe für das Bildobjekt
festlegen, hier für die Bildkomponente. Für lokale Bilder, die mit require hinzugefügt
wurden, können Sie dies tun, während wir es tun, um es zu überschreiben, aber
Sie müssen es nicht, das ist eine wichtige Unterscheidung.
Jetzt haben Sie vielleicht auch gesehen, dass bei Webbildern das geladene Bild tatsächlich eingeblendet wurde, als es zum ersten Mal geladen
wurde, und das ist ein netter Werkseffekt, den React Native automatisch für Netzwerkbilder hinzufügt.
Das Bild wird heruntergeladen, und während Sie auf den Abschluss des Downloads warten, wird im Grunde nichts angezeigt. Das Bild
kann noch nicht angezeigt werden. Wenn das Bild geladen wird, wird es nicht nur dort eingefügt, sondern langsam
blendet es ein, was ein schöner Übergang für das geladene Bild ist.
Das ist ein schöner Effekt, und Sie können dies auch mit der Überblendungsdauer steuern. Sie können dies
auf eine Zahl einstellen und der Standardwert ist 300,
das wären 300 ms, aber Sie können dies auf einen anderen Millisekundenwert einstellen, z. B. 1000 ms, was eine
Sekunde für wäre das Bild zu verblassen und so weiter. Nach dem ersten Laden wird das Bild zwischengespeichert,
und daher erfolgte die spätere Verwendung desselben Bildes ziemlich sofort, da es bereits
heruntergeladen wurde.
So verwenden Sie Netzwerk-Images und beachten Sie diese.