Pré-chargement d'image dans React Native

Question

Je construis ma première application avec React Native, une application avec une longue liste d'images. Je veux montrer un spinner au lieu de l'image pendant le chargement de l'image. Cela semble trivial mais je n'ai pas trouvé de solution. Je pense que pour un spinner je suppose utiliser ActivityIndicatorIOS, mais comment puis-je le combiner avec un composant Image?

<Image source={...}> 
    <ActivityIndicatorIOS /> 
</Image> 

Est-ce une bonne direction? Est-ce que je manque quelque chose?

Answer 1

Juste couru dans le même problème. Donc, fondamentalement, vous avez la bonne approche, mais l'indicateur ne doit bien sûr être rendu que lorsque l'image est en cours de chargement. Pour garder une trace de cela, vous avez besoin d'état. Pour le garder simple, nous supposons que vous avez juste sur l'image dans le composant et gardez l'état pour cela dans le même composant. (Les enfants cool argumenteront que vous devriez utiliser un composant d'ordre supérieur pour cela et ensuite passer l'état via un prop;)

L'idée est alors que votre image commence le chargement et onLoadEnd (ou onLoad, mais le spinner est bloqué sur erreur, ce qui est bien ou bien sûr) vous re-définir l'état.

getInitialState: function(){ return { loading: true }} 

render: function(){ 
    <Image source={...} onLoadEnd={()=>{ this.setState({ loading: false }) }> 
     <ActivityIndicatorIOS animating={ this.state.loading }/> 
    </Image> 
} 

Vous pouvez également commencer avec {chargement: false} et mettez-le vrai onLoadStart, mais je ne suis pas sûr de ce que l'avantage serait de cela.

Pour des raisons de style, en fonction de votre disposition, vous devrez peut-être placer l'indicateur dans une vue de conteneur parfaitement positionnée. Mais vous avez l'idée.