Comment consommer le résultat de Image.prefetch dans React Native?

Question

J'essaie de pré-visualiser une image en utilisant Image.prefetch() dans un composant de niveau d'entrée de sorte que lorsque l'utilisateur navigue vers un composant enfant qui affiche l'image susmentionnée, il sera prêt à être affiché avec moins de retard.

Image.prefetch() est mentionné sous la rubrique Image dans la documentation React Native mais j'ai trouvé les exemples assez compliqués. Est-ce que quelqu'un qui a utilisé cette fonctionnalité peut expliquer comment cela fonctionnerait pour le cas d'utilisation simple que j'ai mentionné ci-dessus?

Voilà comment j'ai essayé de le mettre en œuvre:

// main.js 

class Main extends Component { 
    render() { 
     let prefetch = Image.prefetch(this.props.url); 
     return (
      <Content imgUrl={this.props.url}/> 
     ); 
    } 
} 



// content.js 
class Content extends Component { 
    render() { 
     const { imgUrl } = this.props; 
     return (
      <Image source={imgUrl} /> 
     ); 
    } 
} 

Le résultat de cette mise en œuvre est une image vide car elle retourne juste une promesse sans image.

Qu'est-ce qui me manque ici?

Answer 1

Vous devez rendre le contenu après le prefetch est résolu:

render() { 
 
    Image.prefetch(this.props.url) 
 
     .then(() => { 
 
      return (
 
       <Content imgUrl={this.props.url} /> 
 
      ); 
 
     }) 
 
     .catch(error => console.log(error)) 
 
}

Vous peut également montrer l'ActivityIndicator en préchargement dans le rendu principal, conditionnel à une variable d'état qui change son drapeau (vrai/faux) quand la préextraction est résolue de sorte que l'indicateur disparaisse sur cet événement.