react native fast image

Fastimage

Componente de imagen nativo reaccionante de reaccionamiento.

Aplicación de ejemplo de FastImage.

El componente Image de React Native maneja el almacenamiento en caché de imágenes como navegadores en su mayor parte. Si el servidor devuelve los encabezados de control de caché adecuados para las imágenes, generalmente obtendrá el tipo de comportamiento de almacenamiento en caché incorporado que tendría en un navegador. Incluso tanta gente se ha dado cuenta:

• Parpadeo.
• Cache fallas.
• Carga de bajo rendimiento desde caché.
• Bajo rendimiento en general.

FastImage es un reemplazo Image que resuelve estos problemas. FastImage es un envoltorio alrededor de SDWebimage (iOS) y Glide (Android).

Características

• Imágenes de caché agresivamente.
• Agregar encabezados de autorización.
• Priorizar imágenes.
• Imágenes de precarga.
• Soporte GIF.
• Radio fronterizo.

Uso

Nota: Debe usar React Native 0.60.0 o superior para usar la versión más reciente 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 }
    />
) 

¿Estás usando Glide ya usando un AppGlidemodule?

• ¿Estás usando Glide ya usando un AppGlidemodule? (Es posible que tenga problemas si no lee esto)

¿Estás usando Proguard?

Si usa Proguard, deberá agregar estas líneas a 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 *;
}

Propiedades

source?: object

Fuente para que la imagen remota se cargue.

---

source.uri?: string

URL remota para cargar la imagen desde. Eg 'https://facebook.github.io/react/img/logo_og.png' .

---

source.headers?: object

Encabezados para cargar la imagen con. Eg { Authorization: 'someAuthToken' } .

---

source.priority?: enum

• FastImage.priority.low - baja prioridad.
• FastImage.priority.normal (predeterminado) - prioridad normal.
• FastImage.priority.high - alta prioridad.

---

source.cache?: enum

• FastImage.cacheControl.immutable - (predeterminado) - Solo se actualiza si la URL cambia.
• FastImage.cacheControl.web : use encabezados y siga los procedimientos de almacenamiento en caché normales.
• FastImage.cacheControl.cacheOnly : solo muestra imágenes de Cache, no haga ninguna solicitud de red.

---

defaultSource?: number

• Un activo cargado con require(...) .
• Tenga en cuenta que, al igual que la implementación Image incorporada, en Android defaultSource no funciona en modo de depuración. Esto se debe al hecho de que los activos se envían desde el servidor Dev, pero las funciones de RN solo saben cómo cargarlo de res .

---

resizeMode?: enum

• FastImage.resizeMode.contain : escala la imagen de manera uniforme (mantenga la relación de aspecto de la imagen) para que ambas dimensiones (ancho y altura) de la imagen sean iguales o menos que la dimensión correspondiente de la vista (menos relleno).
• FastImage.resizeMode.cover (predeterminado) : escala la imagen de manera uniforme (mantenga la relación de aspecto de la imagen) para que ambas dimensiones (ancho y altura) de la imagen serán igual o más grandes que la dimensión correspondiente de la vista (menos relleno).
• FastImage.resizeMode.stretch - Escala de ancho y altura de forma independiente, esto puede cambiar la relación de aspecto del SRC.
• FastImage.resizeMode.center : no escalar la imagen, manténgase centrado.

---

onLoadStart?: () => void

Llamado cuando la imagen comienza a cargarse.

---

onProgress?: (event) => void

Llamado cuando la imagen se está cargando.

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

---

onLoad?: (event) => void

Llamó a una imagen de imagen exitosa. Llamado con el ancho y la altura de la imagen cargada.

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

---

onError?: () => void

Llamó a un error de recuperación de la imagen.

---

onLoadEnd?: () => void

Llamado cuando la imagen termina la carga, ya sea exitosa o un error.

---

style

Un estilo nativo reaccionado. Apoya el uso de borderRadius .

---

fallback: boolean

Si es verdadero se volverá a usar Image . En este caso, la imagen seguirá diseñada y establecida de la misma manera que FastImage .

---

tintColor?: number | string

Si se suministra, cambia el color de todos los píxeles no transparentes al color dado.

Métodos estáticos

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

Las imágenes de precarga para mostrar más tarde. p.ej

 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>

Borre todas las imágenes de la memoria caché de memoria.

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

Borre todas las imágenes del caché de disco.

Solución de problemas

Si tiene algún problema para usar esta biblioteca, pruebe los pasos en la resolución de problemas y vea si lo arreglan.

Desarrollo

Siga estas instrucciones para ejecutar la aplicación de ejemplo.

Versiones nativas reaccias compatibles

Este proyecto solo tiene como objetivo admitir la última versión de React Native.
Esto simplifica el desarrollo y las pruebas del proyecto.

Si necesita nuevas funciones o correcciones de errores para versiones anteriores, puede desembolsar este proyecto.

Créditos

La idea de estos módulos provino del paquete React-Native-Web-Image de Vovkasm. También usa Glide y SDWebimage, pero no tenía algunas características que necesitaba (prioridad, encabezados).

Gracias a @mobinni por ayudar con la conceptualización

Licencias

• Fastimage - MIT © Dylanvann
• SDWebimage - MIT
• Glide - BSD, Parte MIT y Apache 2.0. Consulte el archivo de licencia para obtener más detalles.