Caching Bild Assets

Question

Expo hat Modul namens Assets, die zum Zwischenspeichern von Bildern und Schriften (nicht aus dem Internet) verwendet werden kann. Da ich mein Projekt von der Expo geworfen habe, frage ich mich, ob ich das gleiche ohne Expo erreichen kann (Vanille reagiert nativ).

Dies ist Link zu ihrer Dokumentation: https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html

dies ist mein Code, bevor ich mein Projekt ausgeworfen:

import { Asset, Font } from 'expo' 

export default function cacheAssetsAsync ({ 
    images = [], 
    fonts = [] 
}) { 
    return Promise.all([ 
    ...cacheImages(images), 
    ...cacheFonts(fonts) 
    ]) 
} 

function cacheImages (images) { 
    return images.map(image => Asset.fromModule(image).downloadAsync()) 
} 

function cacheFonts (fonts) { 
    return fonts.map(font => Font.loadAsync(font)) 
} 

Answer 1

Für externe Bilder können Sie Bild Moduls prefetch Methode verwenden.

Beispiel

import { Image } from 'react-native'; 

Image.prefetch('https://some.path.image'); 

Answer 2

I react-native-fast-image für Bildcachierens (lokal und remote) verwenden. Gerade von den docs:

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

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

Answer 3

Sie können in meinem höherer Ordnung Komponentenmodul interessiert sein, die leistungsbezogene Bild Caching und „permanente Cache“ -Funktion auf die native <Bild> Komponente hinzufügt.

React Native Image Cache HOC

Tl; DR-Code Beispiel:

import imageCacheHoc from 'react-native-image-cache-hoc'; 
const CacheableImage = imageCacheHoc(Image); 

export default class App extends Component<{}> { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}>Welcome to React Native!</Text> 
     <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} /> 
     <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} /> 
     </View> 
); 
    } 
} 

Das erste Bild wird zwischengespeichert werden, bis die gesamte lokale Cache letzte 15 MB (Standard) wächst dann im Cache gespeicherten Bilder ältesten zuerst bis zum vollständigen gelöscht der Cache liegt wieder unter 15 MB.

Das zweite Bild wird permanent auf der lokalen Festplatte gespeichert. Nutzer verwenden diese Funktion als Ersatz für das Versenden statischer Bilddateien mit Ihrer App.

Das sollte Ihre Anforderung out of the Box behandeln. Ich hoffe es hilft!