react native fast image

Fastimage

Performant React Native Bildkomponente.

FastImage Beispiel App.

Image von React Native verarbeitet zum größten Teil das Bild von Bild wie Browsern. Wenn der Server die richtigen Cache -Steuerungsheader für Bilder zurückgibt, erhalten Sie im Allgemeinen die Art von integriertem Caching -Verhalten, das Sie in einem Browser haben würden. Auch so viele Menschen haben es bemerkt:

• Flackern.
• Cache -Fehler.
• Niedrig Leistungsladung vom Cache.
• Niedrige Leistung im Allgemeinen.

FastImage ist ein Image , der diese Probleme löst. FastImage ist ein Wrapper um Sdwebimage (iOS) und Glide (Android).

Merkmale

• Aggressiv zwischen Bildern.
• Fügen Sie Autorisierungsheader hinzu.
• Priorisieren Sie Bilder.
• Vorlädungsbilder.
• GIF -Unterstützung.
• Grenzradius.

Verwendung

Hinweis: Sie müssen React Native 0.60.0 oder höher verwenden, um die neueste Version von react-native-fast-image zu verwenden.

yarn add react-native-fast-image
cd ios && pod install

 import FastImage from 'react-native-fast-image'

const YourImage = ( ) => (
    < FastImage
        style = { { width : 200 , height : 200 } }
        source = { {
            uri : 'https://unsplash.it/400/400?image=1' ,
            headers : { Authorization : 'someAuthToken' } ,
            priority : FastImage . priority . normal ,
        } }
        resizeMode = { FastImage . resizeMode . contain }
    />
) 

Verwenden Sie Glide bereits mit einer Appglidemodule?

• Verwenden Sie Glide bereits mit einer Appglidemodule? (Möglicherweise haben Sie Probleme, wenn Sie dies nicht lesen)

Verwenden Sie Proguard?

Wenn Sie Proguard verwenden, müssen Sie diese Zeilen zu android/app/proguard-rules.pro hinzufügen:

 -keep public class com.dylanvann.fastimage.* {*;}
-keep public class com.dylanvann.fastimage.** {*;}
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

Eigenschaften

source?: object

Quelle für das laden entfernte Remote -Bild.

---

source.uri?: string

Remote -URL zum Laden des Bildes aus. EG 'https://facebook.github.io/react/img/logo_og.png' .

---

source.headers?: object

Header, um das Bild mit zu laden. EG { Authorization: 'someAuthToken' } .

---

source.priority?: enum

• FastImage.priority.low - niedrige Priorität.
• FastImage.priority.normal (Standard) - Normale Priorität.
• FastImage.priority.high - hohe Priorität.

---

source.cache?: enum

• FastImage.cacheControl.immutable - (Standard) - Nur aktualisiert, wenn URL ändert.
• FastImage.cacheControl.web - Verwenden Sie Header und befolgen Sie die normalen Caching -Verfahren.
• FastImage.cacheControl.cacheOnly - Zeigen Sie nur Bilder aus Cache an, stellen Sie keine Netzwerkanforderungen an.

---

defaultSource?: number

• Ein Vermögenswert mit require(...) .
• Beachten Sie, dass wie bei der integrierten Image auf Android defaultSource im Debug-Modus nicht funktioniert. Dies liegt an der Tatsache, dass Vermögenswerte vom Dev -Server gesendet werden, aber die Funktionen von RN wissen nur, wie man sie aus res lädt.

---

resizeMode?: enum

• FastImage.resizeMode.contain - skalieren Sie das Bild gleichmäßig (halten Sie das Seitenverhältnis des Bildes auf), so dass sowohl Dimensionen (Breite als auch Höhe) des Bildes gleich oder weniger als die entsprechende Abmessung der Ansicht (minus Polsterung) sind.
• FastImage.resizeMode.cover (Standard) - Skalieren Sie das Bild gleichmäßig (halten Sie das Bildverhältnis des Bildes auf), so dass beide Abmessungen (Breite und Höhe) des Bildes gleich oder größer sind als die entsprechende Dimension der Ansicht (minus Polsterung).
• FastImage.resizeMode.stretch - Skalierungsbreite und Höhe unabhängig, dies kann das Seitenverhältnis des SRC ändern.
• FastImage.resizeMode.center - skalieren Sie das Bild nicht, halten Sie zentriert.

---

onLoadStart?: () => void

Aufgerufen, wenn das Bild zu laden beginnt.

---

onProgress?: (event) => void

Aufgerufen, wenn das Bild geladen wird.

onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}

---

onLoad?: (event) => void

Forderte ein erfolgreiches Bild ab. Mit der Breite und Höhe des geladenen Bildes aufgerufen.

onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}

---

onError?: () => void

Aufgerufen einen Bildabruffehler.

---

onLoadEnd?: () => void

Aufgerufen, wenn das Bild das Laden beendet, unabhängig davon, ob es erfolgreich war oder ein Fehler.

---

style

Ein reagierter nativer Stil. Unterstützt mit borderRadius .

---

fallback: boolean

Wenn True fallback zur Verwendung Image . In diesem Fall wird das Bild weiterhin gestylt und genauso gestaltet wie FastImage .

---

tintColor?: number | string

Wenn Sie geliefert werden, ändert sich die Farbe aller nicht transparenten Pixel in die angegebene Farbe.

Statische Methoden

FastImage.preload: (source[]) => void

Vorladungsbilder zum späteren Anzeigen vorladen. z.B

 FastImage . preload ( [
    {
        uri : 'https://facebook.github.io/react/img/logo_og.png' ,
        headers : { Authorization : 'someAuthToken' } ,
    } ,
    {
        uri : 'https://facebook.github.io/react/img/logo_og.png' ,
        headers : { Authorization : 'someAuthToken' } ,
    } ,
] )

FastImage.clearMemoryCache: () => Promise<void>

Löschen Sie alle Bilder aus dem Speichercache.

FastImage.clearDiskCache: () => Promise<void>

Löschen Sie alle Bilder aus dem Festplattencache.

Fehlerbehebung

Wenn Sie Probleme mit dieser Bibliothek haben, versuchen Sie die Schritte zur Fehlerbehebung und prüfen Sie, ob sie sie beheben.

Entwicklung

Befolgen Sie diese Anweisungen, um die Beispiel -App zum Laufen zu bringen.

Unterstützte reagierte native Versionen

Dieses Projekt zielt nur darauf ab, die neueste Version von React Native zu unterstützen.
Dies vereinfacht die Entwicklung und die Prüfung des Projekts.

Wenn Sie neue Funktionen oder Fehlerbehebungen für ältere Versionen benötigen, können Sie dieses Projekt aufgeben.

Credits

Die Idee für diese Module kam aus dem React-Native-Web-Image-Paket von Vovkasm. Es verwendet auch Glide und SDWebimage, hatten aber keine einige Funktionen, die ich brauchte (Priorität, Header).

Vielen Dank an @Mobinni für die Hilfe bei der Konzeptualisierung

Lizenzen

• Fastimage - MIT © Dylanvann
• Sdwebimage - MIT
• Glide - BSD, Teil MIT und Apache 2.0. Weitere Informationen finden Sie in der Lizenzdatei.