升级到 SDK 51 Expo 后，React Native 地图在 PROVIDER_DEFAULT 上崩溃

Question

我最近将我的 React Native 应用程序升级到了 SDK 51 Expo。升级后，我遇到了 React Native Maps 停止工作的问题。使用 PROVIDER_DEFAULT 设置时应用程序崩溃。使用PROVIDER_GOOGLE时出现以下错误

 ERROR  react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS.

我还使用 BottomSheetModal 来启用地图内的搜索功能。这是我的代码的相关部分：

var mapStyle = [
    {
      "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.business",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#e5e5e5"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "geometry.fill",
      "stylers": [
        {
          "color": "#a7deb6"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#9e9e9e"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#ffffff"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "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",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "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": "geometry.fill",
      "stylers": [
        {
          "color": "#a5b4da"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#9e9e9e"
        }
      ]
    }
  ]

//SetLocation Modal state
const [searchLocationModal, setSearchLocationModal] = useState(false);

const [isLoading, setIsLoading] = useState(false);

//geoLocation state
const { userLocation } = useSnapshot(locationState);

const DELTA_VALUE = 0.005

const initialRegion = {
    latitude: locationState.latitude,
    longitude: locationState.longitude,
    latitudeDelta: 0.005,
    longitudeDelta: 0.005,
}

const [markerLocation, setMarkerLocation] = useState({
    latitude: locationState.latitude,
    longitude: locationState.longitude,
    latitudeDelta: DELTA_VALUE,
    longitudeDelta: DELTA_VALUE,
})

const sheetRef = useRef<BottomSheet>(null)
//Second SnapPoint 45%
const snapPoints = ['38%', '38%']

const [addressSearch, setAddressSearch] = useState('');

const updateLocation = async () => {

    let currentUserID = firebase.default.auth().currentUser?.uid

    try {  
      if(currentUserID){
          await updateUser(currentUserID).then((doc) => {

              //Check if markerLocation is the same as saved LatLng
              doc.get().then((userDoc) => {
                  if (markerLocation.latitude != userDoc.data().location.lat && markerLocation.longitude != userDoc.data().location.long ){
                      doc.update({
                          "location.lat": markerLocation.latitude,
                          "location.long": markerLocation.longitude,
                      }).then(async () => {
                          await getSavedLocation().then(() => {setSearchLocationModal(false)})
                      })
                  } else {
                      console.log('Location is the same')
                  }
                      
              }).then(() => {
                findNearestPopular()
              })
          })
      } else {
        locationState.latitude = markerLocation.latitude
        locationState.longitude = markerLocation.longitude

        await getAddress({lat: markerLocation.latitude, long: markerLocation.longitude}).then(() => {
          setSearchLocationModal(false)
          console.log(locationState)
        }).then(() => {
          findNearestPopular()
        })            
      }
    } catch (error) {
      console.log(error.message)
    }
}

useEffect(() => {
    
    const timer = setTimeout(() => {
        if(addressSearch == ''){
            setMarkerLocation(initialRegion)
        } else 
        getLatLang(addressSearch).then((x) => {
            console.log('Bottom Sheet result: ' + x?.lat, x?.long)
            if (x?.lat && x?.long != undefined) {
                setMarkerLocation({
                    latitude: x?.lat,
                    longitude: x?.long,
                    latitudeDelta: DELTA_VALUE,
                    longitudeDelta: DELTA_VALUE
                })
            }

        })
    },500)

    return () => {clearTimeout(timer)}
  }, [locationState, addressSearch])

return (
    <>
    <Modal
    animationType="slide"
    visible={searchLocationModal}
    onRequestClose={() => {
        setSearchLocationModal(!searchLocationModal);
    }}
    >

<TouchableOpacity style={styles.modalCloseBtn} onPress={() => {setSearchLocationModal(!searchLocationModal)}}>
      <Entypo name="chevron-small-left" size={30} color="#37BD6B"/>
</TouchableOpacity>

    <MapView.Animated
    style={{height: '70%', width: '100%', zIndex: -1}}
    mapType={"standard"}
    provider={PROVIDER_DEFAULT}
        initialRegion={initialRegion}
        region={markerLocation}
        customMapStyle={mapStyle}
        
    >
        <Marker.Animated coordinate={markerLocation}></Marker.Animated>
    </MapView.Animated>
        <BottomSheet keyboardBehavior="interactive" ref={sheetRef} snapPoints={snapPoints} style={{}}>
        
            <React.Fragment>
                <View style={styles.currentLocationContainer}>
                    <View>
                        <MaterialIcons style={styles.locationIcon} name={'my-location'} size={25}/>
                    </View>
                    <View style={styles.currentLocationTxtGrp}>
                        <View>
                            <Text style={{fontWeight: '700', fontSize: 18, fontFamily: 'Gilroy-SemiBold', marginBottom: 4}}>Current Location</Text>
                        </View>
                            
                        <View>
                            <Text style={{fontWeight: '400', fontSize: 16, fontFamily: 'Gilroy-Medium'}}>{userLocation}</Text>
                        </View>
                    </View>
                </View>

                <View style={styles.searchContainer}>
                    <View style={styles.searchIconContainer}>
                        <AntDesign style={{paddingLeft: 15, color: "#B3B4B9"}} name="search1" size={19} />
                    </View>

                    <BottomSheetTextInput onChangeText={(value) => setAddressSearch(value)} style={styles.searchBar}/>
                </View>

                
                <TouchableOpacity onPress={updateLocation} >
                    <View style={styles.updateLocationContainer}>
                        <Text style={styles.updateLocation}>Update Location</Text>
                    </View>
                </TouchableOpacity>
                
            </React.Fragment>   
        </BottomSheet>

    </Modal>

Answer 1

尝试官方文档

如果没有帮助，请尝试降级软件包版本，删除node_modules并重新安装，然后重新安装pod。