反应本机地图与世博会

Question

所以我试图让本地地图在 expo 应用程序中工作，文档页面说 "No setup required for use within the Expo app"

https://docs.expo.io/versions/latest/sdk/map-view/?redirected

但是在使用 expo 安装库后它不起作用。

我有 2 个关于为什么它不起作用的基本问题：

你把 Google 控制台的 API 键放在哪里？
如何启用 Google 地图与控制台上的 expo 应用程序一起使用，启用 android sdk？

Answer 1

用法

您只需从 expo 导入 MapView，因为 react-native-maps 包含在 expo 中。（如果你使用 expo 并且没有弹出你的应用程序，则没有任何集成或链接步骤。我想文档对此不是很清楚......）

像这样从 expo 导入：

import { MapView } from 'expo'

而不是像往常一样使用它并在 documentation of react-native-maps:

中描述

<MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />

集成Api键

如果您使用 expo，google 游戏控制台中的 api 键属于 app.json 的 android 和 ios 部分。

将此添加到您的 app.json > android.config:

"googleMaps": { "apiKey": "<android maps api key>" }

这是给你的 app.json > ios.config:

"googleMapsApiKey": "<ios maps api key>"

你的 app.json 最后应该包含这样的东西（以及通常在那里的所有其他东西）：

{
    "expo": {
        "android": {
            "package": "com.company",
            "config": {
                "googleMaps": {
                    "apiKey": "<android maps key>"
                }
            }
        },
        "ios": {
            "bundleIdentifier": "com.company",
            "config": {
                "googleMapsApiKey": "<ios maps api key>"
            }
        }
    }
}

Answer 2

2020 年夏季更新：

expo 封装 no longer supports 它自己的 built-in MapView 组件。因此，而不是像这样从 expo 导入 MapView（如@Leo 所述）：

import { MapView } from 'expo';

您应该直接安装 react-native-maps 模块以从那里导入 MapView 组件，如下所示：

import MapView from 'react-native-maps';

您可以使用错误消息 shown here 中提到的 expo-cli 命令或您选择的包管理器（例如 npm 或 yarn.

反应本机地图与世博会

react-native-maps with expo

react-native

react-native-maps