Реагировать Собственное локальное изображение загружает вторую часть после содержимого

Question

У меня есть локальное изображение, которое я использую в качестве фонового изображения. Он загружается примерно через секунду после остальной части содержимого.

<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> 
     .... 
    ) 
    } 
}