Reactネイティブローカルイメージが内容の後に1秒間読み込まれます

Question

私は、私が背景イメージとして使用しているローカルイメージを持っています。コンテンツの残りの部分を1秒後に読み込みます。

<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}> 

imageContainer: { 
    flex: 1, 
    width: null, 
    height: null, 
} 

画像を読み込んだ後にコンテンツを読み込む方法はありますか？私はonLoadとonLoadEnd小道具を使ってみましたが、画像が読み込まれる前に起動しました。

Answer 1

はい...それは単純ではない、実際に、あなたがイメージ・プリフェッチを使用する必要があります...このリンクをチェックしている：React Image prefetch

それとも実際にあなたがこの試すことができます：

<Image 
    onLoadEnd={()=>this.setState({loadEnd:true})} 
    source={require('./assets/climbing_mountain.jpeg')} 
    style={styles.imageContainer}> 

とでは、あなたが本当にお勧めしないような何かをすることができますレンダリングメソッド：

render(){ 
    if(!this.state.loadEnd) { 
    return(
     <Image 
     key='image_key' 
     onLoadEnd={()=>this.setState({loadEnd:true})} 
     source={require('./assets/climbing_mountain.jpeg')} 
     style={styles.imageContainer}> 
    ) 
    }else { 
    return (
     <View> 
     .... 
     <Image 
     key='image_key' 
     onLoadEnd={()=>this.setState({loadEnd:true})} 
     source={require('./assets/climbing_mountain.jpeg')} 
     style={styles.imageContainer}> 
     </view> 
     .... 
    ) 
    } 
}