ネイティブ検出ローディング画像がありません

Question

問題があります。 ImageではonLoad、onLoadStart、onLoadEndを使用します。サーバーが応答リンクイメージを取得してイメージを表示し、読み込みを追加するのを待っています。しかし、絶え間なく揺れる。

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

コンストラクタからイメージを返すか、すべてのコードを投稿していませんか？

質問には、あなたの 'loading.gif'またはあなたのuriイメージがロードされている間、常に状態を変更するように見えますので、それはうまくいかないと思います。また、画像の高さと重さを設定していますか？

静的リソースとは異なり、画像の のサイズを手動で指定する必要があります。

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

たぶん、あなたはあなたの状態の画像のパスを格納し、状態値に応じて条件付きのレンダリングを行うことができます。例：

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

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

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

上記のコードを例として考えてみましょう。

これはあなたにとって価値があると考えています。