Reactive native erkennen Laden Bild

Question

Ich habe ein Problem. Ich verwende onLoad, onLoadStart und onLoadEnd in Image. Ich möchte warten, während der Server Antwort Link Bild und Bild anzeigen, Lade hinzufügen. Aber es ruckelt ständig.

constructor (props) { 
    super(props) 
    this.state = {loading: true}} 

    return(
    <Image 
     onLoad={(e) => this.setState({loading: true})} 
     onError={(e) => this.setState({loading: false})} 
     onLoadStart={(e) => this.setState({loading: false})} 

     source={this.state.loading ? require('../../img/loading.gif') : { 
     uri: getBestUrl(artwork)}} 
     style={styles.artworkImage} 
     resizeMode={Image.resizeMode.cover} 
     />) 

Answer 1

Sie geben ein Bild von Ihrem Konstruktor zurück, oder Sie haben den gesamten Code nicht veröffentlicht?

Nun zu der Frage, ich denke, es wird nicht so funktionieren, da es scheint, dass wird immer den Zustand ändern, während es Ihre 'loading.gif' oder Ihr URI-Bild lädt. Stellen Sie Höhe und Gewicht für Ihr Bild ein? Das ist erforderlich, wie Sie in der docs

Im Gegensatz zu statischen Ressourcen sehen können, müssen Sie manuell die Dimensionen des Bildes angeben.

https://facebook.github.io/react-native/docs/images.html#network-images

Vielleicht können Sie speichern die Bildpfad in Ihrem Zustand und machen eine bedingte Rendering gemäß dem Zustandswert. Zum Beispiel:

... 
this.state = { 
imagePath: null, 
} 
... 

this.setState({ 
imagePath: getBestUrl(artwork); 
}); 
... 

{ 
this.state.imagePath ? <Image uri={require(this.state.imagePath)} /> : <Image uri={require('loading.gif')} 
} 

Betrachten Sie den obigen Code nur als ein Beispiel, um die Idee auszudrücken.

Hoffe, dass dies für Sie wert sein kann.