如何修复 iPhone 上的 EAS 版本的 Google 地图错误？

Question

我将我的 Expo SDK 43 托管工作流程项目迁移到 EAS 构建。

我使用 Google 地图作为 Android 和 iOS 的默认地图选择，但在导航到带有地图的屏幕时收到此错误：

react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps
 on iOS. at node_modules/react-native-maps/lib/components/decorateMapComponent.js:27:54 in <anonymous>

当我按照错误中列出的路径到达我的node_modules文件时，它会带我到“decorateMapComponent.js”，这是一个包含以下代码的js文件。

需要修改什么才能使 iOS 上的 EAS 接受 Google 地图？

以下是代码：

import PropTypes from 'prop-types';
import { requireNativeComponent, NativeModules, Platform } from 'react-native';
import { PROVIDER_DEFAULT, PROVIDER_GOOGLE } from './ProviderConstants';

export const SUPPORTED = 'SUPPORTED';
export const USES_DEFAULT_IMPLEMENTATION = 'USES_DEFAULT_IMPLEMENTATION';
export const NOT_SUPPORTED = 'NOT_SUPPORTED';

export function getAirMapName(provider) {
  if (Platform.OS === 'android') {
    return 'AIRMap';
  }
  if (provider === PROVIDER_GOOGLE) {
    return 'AIRGoogleMap';
  }
  return 'AIRMap';
}

function getAirComponentName(provider, component) {
  return `${getAirMapName(provider)}${component}`;
}

export const contextTypes = {
  provider: PropTypes.string,
};

export const createNotSupportedComponent = message => () => {
  console.error(message);
  return null;
};

function getViewManagerConfig(viewManagerName) {
  const UIManager = NativeModules.UIManager;
  if (!UIManager.getViewManagerConfig) {
    // RN < 0.58
    return UIManager[viewManagerName];
  }
  // RN >= 0.58
  return UIManager.getViewManagerConfig(viewManagerName);
}

export const googleMapIsInstalled = !!getViewManagerConfig(
  getAirMapName(PROVIDER_GOOGLE)
);

export default function decorateMapComponent(
  Component,
  { componentType, providers }
) {
  const components = {};

  const getDefaultComponent = () =>
    requireNativeComponent(getAirComponentName(null, componentType), Component);

  Component.contextTypes = contextTypes;

  Component.prototype.getAirComponent = function getAirComponent() {
    const provider = this.context.provider || PROVIDER_DEFAULT;
    if (components[provider]) {
      return components[provider];
    }

    if (provider === PROVIDER_DEFAULT) {
      components[PROVIDER_DEFAULT] = getDefaultComponent();
      return components[PROVIDER_DEFAULT];
    }

    const providerInfo = providers[provider];
    const platformSupport = providerInfo[Platform.OS];
    const componentName = getAirComponentName(provider, componentType);
    if (platformSupport === NOT_SUPPORTED) {
      components[provider] = createNotSupportedComponent(
        `react-native-maps: ${componentName} is not supported on ${Platform.OS}`
      );
    } else if (platformSupport === SUPPORTED) {
      if (
        provider !== PROVIDER_GOOGLE ||
        (Platform.OS === 'ios' && googleMapIsInstalled)
      ) {
        components[provider] = requireNativeComponent(componentName, Component);
      }
    } else {
      // (platformSupport === USES_DEFAULT_IMPLEMENTATION)
      if (!components[PROVIDER_DEFAULT]) {
        components[PROVIDER_DEFAULT] = getDefaultComponent();
      }
      components[provider] = components[PROVIDER_DEFAULT];
    }

    return components[provider];
  };

  Component.prototype.getUIManagerCommand = function getUIManagerCommand(name) {
    const componentName = getAirComponentName(
      this.context.provider,
      componentType
    );
    return getViewManagerConfig(componentName).Commands[name];
  };

  Component.prototype.getMapManagerCommand = function getMapManagerCommand(
    name
  ) {
    const airComponentName = `${getAirComponentName(
      this.context.provider,
      componentType
    )}Manager`;
    return NativeModules[airComponentName][name];
  };

  return Component;
}

Answer 1

尝试将“expoCli”：“4.13.0”添加到您的eas.json中，如下所示：

  "cli": {
    "version": ">= 0.41.0"
  },
  "build": {
    "base": {
      "expoCli": "4.13.0",
    },
    "simulator": {
      "extends": "base",
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true
      }
    },
    "development": {
      "extends": "base",
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "extends": "base",
      "distribution": "internal"
    },
    "production": {
      "extends": "base",
      "releaseChannel": "production"
    }
  },
  "submit": {
  }
}

有同样的问题，对我有用。

Answer 2

简短回答：

检查您是否已设置

ios.config.googleMapsApiKey

（具有适用于 iOS 的有效 API 密钥）。这很令人困惑，因为对于 Android 来说它是

android.config.googleMaps.apiKey

。

有关如何获取 Google 地图 API 密钥以及如何配置 EAS 的完整详细信息，请访问 https://docs.expo.dev/versions/latest/sdk/map-view/#ios。

带有调试步骤的较长答案：

我在 Android 上正确设置 Google 地图后收到此错误。

我在

app.json

中复制了相同的配置块，并且对为什么会发生错误感到困惑，直到我在我的开发版本的Expo网站上检查了“运行expo doctor”步骤的日志。

显示：

 • Field: ios/config - should NOT have additional property 'googleMaps'.

我已经复制了 Android 配置，因此对于 iOS 来说，它基本上没有在正确的位置看到密钥 (

ios.config.googleMapsApiKey

)，并因此给我一个错误。

Answer 3

我遇到了类似的问题，并按照 react-native-maps 文档中的安装步骤进行操作。要解决生成 iOS 文件夹和配置 Google 地图 API 密钥的问题，以下是对我有用的方法。 1 运行以下命令生成 iOS 文件夹 npx expo prebuild 并 点击这里查看更多。