当我打开地图组件时，使用 Expo 创建的 React Native Android 应用程序崩溃

Question

我正在开发一个博览会应用程序，我在其中使用 MapView 来渲染地图，但我使用

react-native-map-clustering

来包装

react-native-maps

。当我通过博览会打开应用程序时，它运行得很好，但是当我构建应用程序并安装在我的 Android 模拟器中时，每次我尝试打开地图时，应用程序都会崩溃并立即关闭。

这是我的组件：

     <MapView
        style={styles.map}
        provider={PROVIDER_GOOGLE}
        initialRegion={INITIAL_REGION}
        showsUserLocation
        showsMyLocationButton
        minZoom={2}
        maxZoom={20}
        clusterColor={COLORS.secondary}
        onRegionChangeComplete={async (region, markers) => {
          if(calculateRadius(region) > placesMapShow.raio){
            setPlacesMapShow({
              raio: Math.min(calculateRadius(region)/2, 10),
              latitude: region.latitude,
              longitude: region.longitude,
              latitudeDelta: region.latitudeDelta,
              longitudeDelta: region.longitudeDelta,
            });
            await refetch();
          }
        }}
      >

我的 app.json 文件的 Android 会话：

"android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ccc"
      },
      "permissions": [
        "android.permission.ACCESS_COARSE_LOCATION",
        "android.permission.ACCESS_FINE_LOCATION",
        "android.permission.FOREGROUND_SERVICE"
      ],
      "package": "com.boucher.app",
      "versionCode": 1,
      "googleServicesFile": "./google-services.json",
      "config": {
        "googleMaps": {
          "apiKey": "******"
        }
      }
    },

我在一些地方读到，我必须在 Google Play 开发人员和 Google Cloud 之间配置 de sha-1 密钥，以确保地图 api-key 能够连接，但我没有找到在哪里以及如何进行配置，并且我认为将 apiKey 放在 app.json 中，然后将 PROVIDER_GOOGLE 设置为地图提供商就足够了。

我尝试了以下方法：

• 将地图 api 密钥放入 app.json 中的 android.config.googleMaps.apiKey 和 PROVIDER_GOOGLE 作为 MapView 属性；
• 从 MapView expo 页面提出建议，例如获取 sha-1 id 和 upt 作为 Google Cloud 中 API 密钥的限制。

Answer 1

经过大量调试，发现问题是由于环境变量访问导致的。所有值均未定义，我相信 apiKey 也无法访问。对于 googleApi 密钥，我必须检查 android 清单是否在此处接收 google apiKey：

    <meta-data android:name="com.google.android.geo.API_KEY" android:value="API_KEY"/>

对于其余的值，我发现直接在自定义钩子上导入 env 不起作用，因此我开始在 React Native 组件中导入变量，并作为参数传递给钩子模块中的 fetch 函数。从 React 组件中，我能够从环境中导入所有内容。