react native fast image
v8.6.3
Performant React Native Image Component.
Exemple de FastImage.
Le composant Image de React Native gère la mise en cache d'image comme les navigateurs pour la plupart. Si le serveur renvoie des en-têtes de contrôle de cache appropriés pour les images, vous obtiendrez généralement le type de comportement de mise en cache intégré que vous auriez dans un navigateur. Même tant de gens ont remarqué:
FastImage est un remplacement Image qui résout ces problèmes. FastImage est un emballage autour de SDWebimage (iOS) et Glide (Android).
Remarque: vous devez utiliser React Native 0.60.0 ou plus pour utiliser la version la plus récente de react-native-fast-image .
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 }
/>
) Si vous utilisez Proguard, vous devrez ajouter ces lignes à android/app/proguard-rules.pro :
-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 *;
}
source?: objectSource pour l'image distante à charger.
source.uri?: string URL distante pour charger l'image. par exemple 'https://facebook.github.io/react/img/logo_og.png' .
source.headers?: object En-têtes pour charger l'image avec. Eg { Authorization: 'someAuthToken' } .
source.priority?: enumFastImage.priority.low - FAIBLE PRIORITÉE.FastImage.priority.normal (par défaut) - Priorité normale.FastImage.priority.high - Priorité élevée.source.cache?: enumFastImage.cacheControl.immutable - (par défaut) - ne met à jour que si l'URL change.FastImage.cacheControl.web - Utilisez des en-têtes et suivez les procédures de mise en cache normales.FastImage.cacheControl.cacheOnly - Affichez uniquement les images de Cache, ne faites aucune demande de réseau.defaultSource?: numberrequire(...) .Image intégrée, sur Android defaultSource ne fonctionne pas en mode débogage. Cela est dû au fait que les actifs sont envoyés à partir du serveur de développement, mais les fonctions de RN ne savent que le charger à partir de res .resizeMode?: enumFastImage.resizeMode.contain - Échec de l'image uniformément (maintenez le rapport d'aspect de l'image) afin que les deux dimensions (largeur et hauteur) de l'image soient égales ou inférieures à la dimension correspondante de la vue (moins le padding).FastImage.resizeMode.cover (par défaut) - Échelle l'image uniformément (maintenez le rapport d'aspect de l'image) afin que les deux dimensions (largeur et hauteur) de l'image soient égales ou supérieures à la dimension correspondante de la vue (moins le rembourrage).FastImage.resizeMode.stretch - Largeur d'échelle et hauteur indépendamment, cela peut modifier le rapport d'aspect du SRC.FastImage.resizeMode.center - Ne pas mettre à l'échelle l'image, garder centré.onLoadStart?: () => voidAppelé lorsque l'image commence à se charger.
onProgress?: (event) => voidAppelé lorsque l'image se charge.
par exemple onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}
onLoad?: (event) => voidAppelé une image réussie fetch. Appelé avec la largeur et la hauteur de l'image chargée.
par exemple onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}
onError?: () => voidAppelé sur une erreur de récupération d'image.
onLoadEnd?: () => voidAppelé lorsque l'image termine le chargement, qu'il ait réussi ou une erreur.
style Un style natif React. Soutien de l'utilisation de borderRadius .
fallback: boolean Si True va se calmer à l'utilisation Image . Dans ce cas, l'image sera toujours stylée et disposée de la même manière que FastImage .
tintColor?: number | stringS'il est fourni, modifie la couleur de tous les pixels non transparents en couleur donnée.
FastImage.preload: (source[]) => voidPrécharge des images à afficher plus tard. par exemple
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>Effacer toutes les images du cache de mémoire.
FastImage.clearDiskCache: () => Promise<void>Effacer toutes les images du cache de disque.
Si vous avez des problèmes en utilisant cette bibliothèque, essayez les étapes de dépannage et voyez s'ils le réparent.
Suivez ces instructions pour faire fonctionner l'exemple de l'application.
Ce projet vise uniquement à prendre en charge la dernière version de React Native.
Cela simplifie le développement et les tests du projet.
Si vous avez besoin de nouvelles fonctionnalités ou de corrections de bogues pour les anciennes versions, vous pouvez débarquer ce projet.
L'idée de ces modules est venue du package React-Web-Image de Vovkasm. Il utilise également Glide et SDWebimage, mais n'avait pas certaines fonctionnalités dont j'avais besoin (priorité, en-têtes).
Merci à @mobinni d'avoir aidé à la conceptualisation
MIT
