react native fast image

FASTIMAGE

Componente de imagem nativa reagir performant.

App FastImage Exemplo.

O componente Image nativo reage lida com o cache de imagens como navegadores na maior parte. Se o servidor estiver retornando cabeçalhos de controle de cache adequados para imagens, você geralmente obterá o tipo de comportamento de armazenamento em cache incorporado que teria em um navegador. Mesmo tantas pessoas notaram:

• Pisca.
• Cache erra.
• Carregamento de baixo desempenho do cache.
• Baixo desempenho em geral.

FastImage é uma substituição Image que resolve esses problemas. FastImage é um invólucro em torno de Sdwebimage (iOS) e Glide (Android).

Características

• Imagens agressivamente em cache.
• Adicionar cabeçalhos de autorização.
• Priorize imagens.
• Imagens de pré -carga.
• Suporte de GIF.
• Raio de fronteira.

Uso

Nota: Você deve estar usando o React Native 0.60.0 ou superior para usar a versão mais recente do 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 }
    />
) 

Você já está usando o Glide já usando um appglidemodule?

• Você já está usando o Glide já usando um appglidemodule? (você pode ter problemas se não ler isso)

Você está usando proGuard?

Se você usar o ProGuard, precisará adicionar essas linhas ao 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 *;
}

Propriedades

source?: object

Fonte da imagem remota para carregar.

---

source.uri?: string

URL remoto para carregar a imagem. por exemplo 'https://facebook.github.io/react/img/logo_og.png' .

---

source.headers?: object

Cabeçalhos para carregar a imagem com. Por exemplo { Authorization: 'someAuthToken' } .

---

source.priority?: enum

• FastImage.priority.low - baixa prioridade.
• FastImage.priority.normal (padrão) - prioridade normal.
• FastImage.priority.high - alta prioridade.

---

source.cache?: enum

• FastImage.cacheControl.immutable - (padrão) - apenas atualiza se a URL for alterada.
• FastImage.cacheControl.web - Use cabeçalhos e siga procedimentos normais de cache.
• FastImage.cacheControl.cacheOnly - mostra apenas imagens do cache, não faça nenhuma solicitação de rede.

---

defaultSource?: number

• Um ativo carregado com require(...) .
• Observe que, como a implementação Image embutida, no Android defaultSource não funciona no modo de depuração. Isso se deve ao fato de que os ativos são enviados do servidor dev, mas as funções do RN sabem apenas como carregá -lo de res .

---

resizeMode?: enum

• FastImage.resizeMode.contain - Escala a imagem uniformemente (mantenha a proporção da imagem) para que ambas as dimensões (largura e altura) da imagem sejam iguais ou menores que a dimensão correspondente da visão (menos preenchimento).
• FastImage.resizeMode.cover (padrão) - Escala a imagem uniformemente (mantenha a proporção da imagem) para que ambas as dimensões (largura e altura) da imagem sejam iguais ou maiores que a dimensão correspondente da visão (menos preenchimento).
• FastImage.resizeMode.stretch - Largura e altura da escala de forma independente, isso pode alterar a proporção do SRC.
• FastImage.resizeMode.center - Não escala a imagem, mantenha -se centrado.

---

onLoadStart?: () => void

Chamado quando a imagem começa a carregar.

---

onProgress?: (event) => void

Chamado quando a imagem está carregando.

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

---

onLoad?: (event) => void

Chamado em uma busca de imagem bem -sucedida. Chamado com a largura e a altura da imagem carregada.

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

---

onError?: () => void

Chamado em um erro de busca de imagem.

---

onLoadEnd?: () => void

Chamado quando a imagem termina o carregamento, seja bem -sucedido ou um erro.

---

style

Um estilo nativo react. Suporta o uso de borderRadius .

---

fallback: boolean

Se True, fallback para usar Image . Nesse caso, a imagem ainda será estilizada e estabelecida da mesma maneira que FastImage .

---

tintColor?: number | string

Se for fornecido, altera a cor de todos os pixels não transparentes para a cor fornecida.

Métodos estáticos

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

Pré -carregue imagens a serem exibidas posteriormente. por exemplo

 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>

Limpe todas as imagens do cache de memória.

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

Limpe todas as imagens do cache do disco.

Solução de problemas

Se você tiver algum problema em usar esta biblioteca, tente as etapas na solução de problemas e veja se elas a corrigem.

Desenvolvimento

Siga estas instruções para executar o aplicativo de exemplo.

React suportado versões nativas

Este projeto tem como objetivo suportar a versão mais recente do React Native.
Isso simplifica o desenvolvimento e o teste do projeto.

Se você precisar de novos recursos ou correções de bugs para versões mais antigas, poderá espalhar este projeto.

Créditos

A idéia para esses módulos veio do pacote React-native-web-Web-Web da Vovkasm. Ele também usa o Glide e o SDWebImage, mas não tinha alguns recursos que eu precisava (prioridade, cabeçalhos).

Obrigado a @Mobinni por ajudar na conceituação

Licenças

• FASTIMAGE - MIT © Dylanvann
• Sdwebimage - MIT
• Glide - BSD, Parte MIT e Apache 2.0. Consulte o arquivo de licença para obter detalhes.