Expo集成react-native-maps设置Google Provider并自定义样式时应用崩溃

问题背景 #

我基于Expo开发应用，使用react-native-maps组件实现地图功能，想要给地图添加自定义样式。但当设置provider为Google时，应用直接崩溃。查相关资料说升级react-native-maps到1.1.0版本可修复，但Expo提示该版本不兼容，要求安装0.31.1版本；升级后问题依旧。试过将provider设为状态变量，初始用默认值，再在useEffect中切换为Google，也无效。当前使用Expo SDK 46，求可行解决办法。

核心原因 #

Expo SDK 46对react-native-maps的版本锁定为0.31.1，该版本在Google地图Provider下使用customMapStyle存在兼容性问题，直接切换Provider会触发崩溃；同时不同Provider对应的样式属性名不同。

解决步骤 #

1. 配置Google Maps API密钥
   在app.json的expo字段中添加平台相关的API密钥配置：

   "android": {
     "config": {
       "googleMaps": {
         "apiKey": "你的Google Maps API密钥"
       }
     }
   },
   "ios": {
     "config": {
       "googleMapsApiKey": "你的Google Maps API密钥"
     }
   }
   

   确保密钥已启用Maps SDK for Android和iOS权限。

2. 替换样式属性名
   针对Google地图Provider，需使用mapStyle属性而非customMapStyle（后者仅适用于默认Provider）。

3. 避免动态切换Provider
   直接在MapView组件上声明provider={PROVIDER_GOOGLE}，不要用状态变量动态切换，避免初始化冲突。

修改后的代码示例 #

import { View, StyleSheet, Dimensions } from 'react-native';
import { MapView, Marker, PROVIDER_GOOGLE } from 'react-native-maps';
import { useAppSelector } from '../store'; // 根据你的项目路径调整

export const CityMap = ({ userLocation }: CityMapProps) => {
  const { fakeDatabase } = useAppSelector((state) => state);

  const temporayHardcodedUserLocation: Coords = {
    lat: 52.229555543511836,
    long: 21.020951705448635,
  };
  const regionWithData = {
    latitude: temporayHardcodedUserLocation.lat,
    longitude: temporayHardcodedUserLocation.long,
    latitudeDelta: 0.05,
    longitudeDelta: 0.05,
  };
  
  const mapStyle = [
    {
      featureType: "landscape.man_made",
      elementType: "labels.icon",
      stylers: [{ visibility: "off" }],
    },
    {
      featureType: "poi.attraction",
      elementType: "labels.icon",
      stylers: [{ visibility: "off" }],
    },
    {
      featureType: "poi.business",
      elementType: "labels.icon",
      stylers: [{ visibility: "off" }],
    },
    {
      featureType: "poi.business",
      elementType: "labels.text",
      stylers: [{ visibility: "on" }],
    },
    {
      featureType: "poi.government",
      elementType: "labels.icon",
      stylers: [{ visibility: "off" }],
    },
  ];

  return (
    <View>
      <MapView
        style={styles.map}
        region={regionWithData}
        provider={PROVIDER_GOOGLE}
        mapStyle={mapStyle} // 替换为mapStyle属性
      >
        {fakeDatabase.map((spot) => {
          const { lat: latitude, long: longitude } = spot.spotCoords;
          return (
            <Marker
              coordinate={{ latitude, longitude }}
              key={spot.spotId}
              onPress={() => console.log("pressed " + spot.spotName)}
            />
          );
        })}
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  map: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
});

额外排查点 #

• 若修改后仍崩溃，执行expo r -c清除Expo缓存后重启项目
• 确认Google API密钥未过期、权限配置正确
• 不要随意修改react-native-maps版本，严格遵循Expo SDK对应的依赖版本要求

内容的提问来源于stack exchange，提问作者seven