文档
BlogChangelogStar us on GitHub
首页指南EASReferenceLearn

Reference version

存档Expo SnackDiscord and forums新闻邮件

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

react-native-maps

一个提供 Map 组件的库，在 Android 上使用 Google Maps，在 iOS 上使用 Apple Maps 或 Google Maps。

Android
iOS
Included in Expo Go

GitHub

npm

Recommended version:
1.29.0

重要 expo-maps 是由 Expo 构建的 react-native-maps 替代方案，在 Android 上使用 Google Maps，在 iOS 上使用 Apple Maps。

react-native-maps 提供一个 Map 组件，在 Android 上使用 Google Maps，在 iOS 上使用 Apple Maps 或 Google Maps。

使用 Expo Go 测试项目时无需额外设置。但是，要将应用二进制文件部署到应用商店，使用 Google Maps 需要额外步骤。更多信息请参阅以下说明。

安装

Terminal
- npx expo install react-native-maps
- yarn expo install react-native-maps
- pnpm expo install react-native-maps
- bun expo install react-native-maps

If you are installing this in an existing React Native app, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

用法

请参阅 react-native-maps/react-native-maps 上的完整文档。

MapView
import React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <MapView style={styles.map} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: '100%',
    height: '100%',
  },
});

使用 Google Maps 部署应用

Android

如果你已在 Android 上为其他 Google 服务（例如 Google Sign In）注册了项目，请在项目中启用 Maps SDK for Android，然后跳到第 4 步。

1

注册 Google Cloud API 项目并启用 Maps SDK for Android

  • 在浏览器中打开 Google API Manager 并创建项目。
  • 创建完成后，进入该项目并启用 Maps SDK for Android。

2

复制应用的 SHA-1 证书指纹

3

创建 API 密钥

  • 前往 Google Cloud Credential manager，点击 创建凭据，然后选择 API 密钥。
  • 在弹出窗口中，点击 编辑 API 密钥。
  • 在 密钥限制 > 应用限制 下，选择 Android 应用。
  • 在 将使用限制为你的 Android 应用 下，点击 添加一项。
  • 将 app.json 中的 android.package（例如：com.company.myapp）添加到软件包名称字段。
  • 然后，添加第 2 步中的 SHA-1 证书指纹值。
  • 点击 完成，然后点击 保存。

4

将 API 密钥添加到项目

由于你使用 Google 作为地图提供方，因此需要将 API 密钥添加到 react-native-maps 配置插件中。将 API 密钥复制到项目中的 .env 文件，或直接复制，然后像这样将其添加到应用配置的 plugins.react-native-maps.androidGoogleMapsApiKey 字段下：

app.json
{
  "expo": {
    "plugins": [
      [
        "react-native-maps",
        {
          "androidGoogleMapsApiKey": "process.env.YOUR_GOOGLE_MAPS_API_KEY"
        }
      ]
    ]
  }
}

信息 如果 EAS Build 未能获取 API 密钥，请确保项目中包含 .easignore 文件。此文件应与 .gitignore 保持一致，但不得排除 .env，以便 EAS Build 访问环境变量。

  • 在代码中，从 react-native-maps 导入 { PROVIDER_GOOGLE }，并将属性 provider={PROVIDER_GOOGLE} 添加到 <MapView>。此属性在 Android 和 iOS 上均适用。
  • 重新构建应用二进制文件（如果应用已上传，也可以重新提交到 Google Play Store）。一种简单的配置成功测试方法是进行模拟器构建。

iOS

如果你已在 iOS 上为其他 Google 服务（例如 Google Sign In）注册了项目，请在项目中启用 Maps SDK for iOS，然后跳到第 3 步。

1

注册 Google Cloud API 项目并启用 Maps SDK for iOS

  • 在浏览器中打开 Google API Manager 并创建项目。
  • 然后进入该项目，点击 启用 API 和服务，并启用 Maps SDK for iOS。

2

创建 API 密钥

  • 前往 Google Cloud Credential manager，点击 创建凭据，然后选择 API 密钥。
  • 在弹出窗口中，点击 编辑 API 密钥。
  • 在 密钥限制 > 应用限制 下，选择 iOS 应用。
  • 在 接受来自具有以下任一捆绑包标识符的 iOS 应用的请求 下，点击 添加一项按钮。
  • 将 app.json 中的 ios.bundleIdentifier（例如：com.company.myapp）添加到捆绑包 ID 字段。
  • 点击 完成，然后点击 保存。

3

将 API 密钥添加到项目

由于你使用 Google 作为地图提供方，因此需要将 API 密钥添加到 react-native-maps 配置插件中。将 API 密钥复制到项目中的 .env 文件，或直接复制，然后像这样将其添加到应用配置的 plugins.react-native-maps.iosGoogleMapsApiKey 字段下：

app.json
{
  "expo": {
    "plugins": [
      [
        "react-native-maps",
        {
          "iosGoogleMapsApiKey": "process.env.YOUR_GOOGLE_MAPS_API_KEY"
        }
      ]
    ]
  }
}
  • 在代码中，从 react-native-maps 导入 { PROVIDER_GOOGLE }，并将属性 provider={PROVIDER_GOOGLE} 添加到 <MapView>。此属性在 Android 和 iOS 上均适用。
  • 重新构建应用二进制文件。一种简单的配置成功测试方法是进行模拟器构建。