使用newLatLngBounds（LatLngBounds，int）时出错：地图大小不能为0。最有可能的是，地图视图尚未出现布局

Question

在Android上使用react-native-maps渲染地图时，有时会在Firebase顾问中出现此错误。在渲染MapView之前，我要检查一下是否有经度和纬度。但是我在某处缺少什么。任何帮助是极大的赞赏。以下是我的Map组件的代码。

import React, { Component } from 'react';
import { View, TouchableOpacity } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import Icon from 'react-native-vector-icons/MaterialIcons';

const renderMarker = ({withMarker, onPress}) =>{

  const { overlayStyle } = styles;
  if(withMarker){
    if(onPress){
      return (
        <TouchableOpacity
          onPress={onPress}
          style={overlayStyle}>
          <Icon
            pointerEvents="none"
            style={{
              marginBottom:32,
              width: 40,
                height:40
            }}
            allowFontScaling={false}
            color="#31cce5"
            name="place"
            size={44}
          />
        </TouchableOpacity>
      );
    }else{
      return(
        <View
          pointerEvents={"none"}
          style={overlayStyle}>
          <Icon
            pointerEvents="none"
            style={{
              marginBottom:32,
              width: 40,
              height:40
            }}
            allowFontScaling={false}
            color="#31cce5"
            name="place"
            size={44}
          />
        </View>
      );
    }
  }
}

class Map extends Component{

  componentDidMount() {
    if(this.props.onRef){
      this.props.onRef(this)
      console.log(this.props);
    }
  }

  render(){
    const { style, lat, long, region, mapType, initialRegion, onRegionChange, onRegionChangeComplete, cacheEnabled, withMarker, onPress } = this.props;
    const { containerStyle } = styles;

    if(lat != null && long != null && initialRegion.latitude != null && initialRegion.longitude != null){
      const customMapStyle = [
          {
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#f5f5f5"
              }
            ]
          },
          {
            "elementType": "labels.icon",
            "stylers": [
              {
                "visibility": "off"
              }
            ]
          },
          {
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#616161"
              }
            ]
          },
          {
            "elementType": "labels.text.stroke",
            "stylers": [
              {
                "color": "#f5f5f5"
              }
            ]
          },
          {
            "featureType": "administrative.land_parcel",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#bdbdbd"
              }
            ]
          },
          {
            "featureType": "poi",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#eeeeee"
              }
            ]
          },
          {
            "featureType": "poi",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#757575"
              }
            ]
          },
          {
            "featureType": "poi.park",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#e5e5e5"
              }
            ]
          },
          {
            "featureType": "poi.park",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#9e9e9e"
              }
            ]
          },
          {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#ffffff"
              }
            ]
          },
          {
            "featureType": "road.arterial",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#757575"
              }
            ]
          },
          {
            "featureType": "road.highway",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#dadada"
              }
            ]
          },
          {
            "featureType": "road.highway",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#616161"
              }
            ]
          },
          {
            "featureType": "road.local",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#9e9e9e"
              }
            ]
          },
          {
            "featureType": "transit.line",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#e5e5e5"
              }
            ]
          },
          {
            "featureType": "transit.station",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#eeeeee"
              }
            ]
          },
          {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#c9c9c9"
              }
            ]
          },
          {
            "featureType": "water",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#9e9e9e"
              }
            ]
          }
        ];

        return (

          <View style={[containerStyle, style]}>
            <MapView
              ref="map"
              provider={PROVIDER_GOOGLE}
              customMapStyle={customMapStyle}
              style={{
                flex: 1
              }}
              mapType={mapType}
              initialRegion={initialRegion}
              region={region}
              onRegionChange={onRegionChange}
              onRegionChangeComplete={onRegionChangeComplete}
              cacheEnabled={cacheEnabled}
            />
            {renderMarker({withMarker, onPress})}
          </View>
        )


    }


    return <View />
  }
}
const styles = {
  containerStyle:{
    position: "relative",
    backgroundColor: "transparent"
  },
  overlayStyle:{
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: "transparent",
    justifyContent: "center",
    alignItems: "center"
  }
}
export { Map };