Проблема с производительностью - загрузка слишком большого количества времени MapView и изображение с высоким разрешением - React Native

Question

Проблема производительности:

Без изображения и mapView, нажмите один вид на другой. работает нормально и очень быстро. но я добавлю изображение высокого разрешения и MapView в функцию render(). это займет время, чтобы загрузить.

Пожалуйста, что является лучшим решением для загрузки как изображения, так и Mapview в методе render(). В настоящее время я буду загружать изображение и mapView в функции Render().

Код функции рендеринга:

     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

Вы можете fetch изображение и до его получения вы можете показать изображение заполнителя или индикатор загрузки. После успешного получения изображения вы можете изменить источник изображения и показать изображение из кэша.