Question React Native - Cache d'image


J'ai lu le document sur le composant d'image React Native dans ce site et j'ai quelques questions: https://facebook.github.io/react-native/docs/image.html

  1. Si j'utilise la propriété source pour afficher l'image. L'image sera-t-elle mise en cache et enregistrée sur le disque après le téléchargement?

  2. Si oui, quelle est la politique de cache?

  3. Si je veux enregistrer l'image téléchargée sur le disque. Est-il préférable d'utiliser la méthode getSize ou prefetch pour le faire?

Merci beaucoup.


11
2017-12-06 05:46


origine


Réponses:


Réagir à la politique de cache du composant d'image natif NSURLRequest comme décrit ici. Personnellement j'utilise RNFetchBlob pour mettre en cache les images comme décrit ici. Vous pouvez également commander ce composant.


4
2018-02-18 20:23



Vous pouvez être intéressé par mon module de composant de niveau supérieur qui ajoute la mise en cache des images liées aux performances et la fonctionnalité de "cache permanent" au composant <Image> natif.

Réagir au cache d'image natif HOC

Exemple de code Tl; DR:

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>
  );
  }
}

La première image sera mise en cache jusqu'à ce que le cache local total dépasse 15 Mo (par défaut), puis les images mises en cache sont supprimées en premier lieu jusqu'à ce que le cache total soit inférieur à 15 Mo.

La deuxième image sera stockée sur le disque local de manière permanente. Les gens l'utilisent pour remplacer les fichiers d'images statiques avec votre application.

Cela devrait gérer votre besoin hors de la boîte. J'espère que cela aide!


2
2017-11-10 20:10