Problème de performance - Loading trop de temps MapView et de l'image haute résolution - React natif

Question

Problème de performance:

Sans l'image et Mapview, pousser une vue à une autre. ça fonctionne très bien et très vite. mais je vais ajouter une image haute résolution et MapView dans la fonction render(). il faut du temps pour charger.

S'il vous plaît quelle est la meilleure solution pour charger à la fois image et Mapview dans la méthode render(). Actuellement, je vais charger l'image et mapView dans la fonction Render().

Rendu code de fonction:

 render(){ 
     const { navigate } = this.props.navigation; 
     return (
      <View style = {styles.container}> 

    **HIGH RESOLUTION IMAGE.** 

       <Image style = {styles.imageSty} 
        source={require('./Images/background.png')} 
       /> 
    **MAP VIEW** 

      <MapView style = {{marginLeft: 40, marginRight: 40, width : Dimensions.get('window').width - 80, marginTop : 10 , height : 100, justifyContent: 'center' ,alignItems: 'center'}} 
        region={this.state.region} 
        onRegionChange={this.onRegionChange} 
       />  
      </View> 
     ) 
} 

Answer 1

Vous pouvez fetch l'image et jusqu'à ce que son tiré par les cheveux que vous pouvez afficher une image d'espace réservé ou un indicateur de chargement. Une fois l'image récupérée avec succès, vous pouvez modifier la source de l'image et afficher l'image à partir du cache.