文档
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.20.1

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

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

安装

Terminal
- npx 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 并点击 Create Credentials，然后点击 API Key。
  • 在弹窗中，点击 Edit API key。
  • 在 Key restrictions > Application restrictions 下，选择 Android apps。
  • 在 Restrict usage to your Android apps 下，点击 Add an item。
  • 将你在 app.json 中的 android.package（例如：com.company.myapp）添加到 package name 字段中。
  • 然后，添加第 2 步中的 SHA-1 certificate fingerprint 的值。
  • 点击 Done，然后点击 Save。

4

将 API 密钥添加到项目中

  • 将你的 API Key 复制到项目中的 .env 文件，或者直接复制，然后将其添加到 app.json 的 android.config.googleMaps.apiKey 字段中，如下所示：
    "android": {
      "config": {
        "googleMaps": {
          "apiKey": "process.env.GOOGLE_MAPS_API_KEY",
        },
      },
    }
  • 在代码中，从 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 并创建一个项目。
  • 然后，进入该项目，点击 Enable APIs and Services 并启用 Maps SDK for iOS。

2

创建 API 密钥

  • 前往 Google Cloud Credential manager 并点击 Create Credentials，然后点击 API Key。
  • 在弹窗中，点击 Edit API key。
  • 在 Key restrictions > Application restrictions 下，选择 iOS apps。
  • 在 Accept requests from an iOS application with one of these bundle identifiers 下，点击 Add an item 按钮。
  • 将你在 app.json 中的 ios.bundleIdentifier（例如：com.company.myapp）添加到 bundle ID 字段中。
  • 点击 Done，然后点击 Save。

3

将 API 密钥添加到项目中

  • 将你的 API Key 复制到项目中的 .env 文件，或者直接复制，然后将其添加到 app.json 的 ios.config.googleMapsApiKey 字段中，如下所示：
    "ios": {
      "config": {
        "googleMapsApiKey":  "process.env.GOOGLE_MAPS_API_KEY",
        },
      }
  • 在代码中，从 react-native-maps 导入 { PROVIDER_GOOGLE }，并将属性 provider={PROVIDER_GOOGLE} 添加到 <MapView>。此属性同时适用于 Android 和 iOS。
  • 重新构建应用二进制文件。测试配置是否成功的一种简单方法是进行模拟器构建。