react-native-maps

提供地图组件的库，该组件在 Android 上使用 Google 地图，在 iOS 上使用 Apple 地图或 Google 地图。

Android

iOS

Included in Expo Go

Bundled version:

1.26.20

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

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

🌐 No additional setup is required when testing your project using Expo Go. However, to deploy the app binary on app stores additional steps are required for Google Maps. For more information, see the instructions below.

安装

🌐 Installation

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.

用法

🌐 Usage

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

🌐 See full documentation at 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 地图部署应用

🌐 Deploy app with Google Maps

安卓

🌐 Android

如果你已经为 Android 上的其他 Google 服务（例如 Google 登录）注册了项目，请在你的项目上启用 Android 版 Maps SDK，然后跳到步骤 4。

注册一个 Google Cloud API 项目并启用 Android 版 Maps SDK

🌐 Register a Google Cloud API project and enable the Maps SDK for Android

打开浏览器访问 Google API 管理器并创建一个项目。
创建完成后，进入项目并启用Android 地图 SDK。

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

🌐 Copy your app's SHA-1 certificate fingerprint

如果你要将应用发布到 Google Play 商店，你至少需要将应用二进制文件上传到 Google Play 控制台。这是 Google 生成应用签名凭证所必需的。
前往 Google Play Console >（你的应用）> 测试与发布 > 应用完整性 > Play 应用签名 > 设置 > 应用签名密钥证书。
复制 SHA-1 证书指纹的值。

如果你已经创建了开发构建，你的项目将使用调试密钥库进行签名。
构建完成后，前往你的项目仪表板，然后在配置 > 点击凭证。
在应用标识符下，点击你的项目包名，在 Android 密钥库下复制 SHA-1 证书指纹的值。

创建一个 API 密钥

🌐 Create an API key

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

将 API 密钥添加到你的项目中

🌐 Add the API key to your project

由于你正在使用 Google 作为地图提供商，你需要将 API 密钥添加到 react-native-maps 配置插件。将你的 API Key 复制到项目的 .env 文件中，或者直接复制，然后将其添加到应用配置的 plugins.react-native-maps.androidGoogleMapsApiKey 字段，如下所示：

🌐 Since you are using Google as the map provider, you need to add the API key to the react-native-maps config plugin. Copy your API Key into your project to either a .env file or copy it directly and then add it to your app config under the plugins.react-native-maps.androidGoogleMapsApiKey field like:

app.json

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

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

iOS

如果你已经为 iOS 上的其他 Google 服务（例如 Google 登录）注册了项目，你可以在你的项目中启用 iOS 版 Maps SDK，然后直接跳到第 3 步。

注册一个 Google Cloud API 项目并启用 iOS 的 Maps SDK

🌐 Register a Google Cloud API project and enable the Maps SDK for iOS

打开浏览器访问 Google API 管理器并创建一个项目。
然后，进入项目，点击启用 API 和服务并启用 iOS 地图 SDK。

创建一个 API 密钥

🌐 Create an API key

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

将 API 密钥添加到你的项目中

🌐 Add the API key to your project

由于你正在使用 Google 作为地图提供商，你需要将 API 密钥添加到 react-native-maps 配置插件。将你的 API Key 复制到项目的 .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 上都有效。
重新构建应用二进制文件。测试配置是否成功的一个简单方法是进行一次模拟器构建。