使用Expo的React Native地图组件库

Question

我正在尝试让native-maps在expo应用中工作，而文档页面上说：“在Expo应用中无需设置即可使用”。

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

但是，在使用expo安装库之后，它没有工作。

我有两个关于它为什么不工作的基本问题：

1. 你在哪里放置来自Google控制台的API密钥？
2. 如何在控制台上启用Google Maps与expo应用程序一起工作，并启用android sdk？

- iqbal125

---

你说的“不工作”是指出现了错误或警告吗？请详细说明你尝试过哪些方法，以便我们能够更好地帮助你。 - mahmoudafer

Answer 1

用法

您可以直接从Expo中导入MapView，因为react-native-maps已包含在Expo中。(如果您使用Expo并且未弹出应用程序，则无需进行任何集成或链接步骤。我想文档在这方面不是很清楚...)

只需像这样从Expo中导入:

import { MapView } from 'expo'

然后按照 react-native-maps 的文档描述 使用它，如同通常使用一样：

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

Api密钥集成

如果你使用Expo，来自Google Play控制台的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>"
            }
        }
    }
}

- Leo

---

这个有效吗？这似乎没有在任何地方有记录。 - a paid nerd

这个有效吗？这似乎没有在任何地方有记录。 - undefined

Answer 2

2020年夏季更新:

expo软件包不再支持其自带的MapView组件。 因此，不应该像@Leo提到的那样从expo导入MapView，而是应该这样导入：

import { MapView } from 'expo';

你应该直接安装react-native-maps模块，从中导入MapView组件，代码如下：

import MapView from 'react-native-maps';

你可以通过使用错误信息在此处显示中提到的expo-cli命令或者像npm或yarn这样的包管理器来下载react-native-maps。

- Haejin Jo