react-native-maps with expo [英] react-native-maps with expo

问题描述

所以我试图让原生地图在 expo 应用程序中工作，文档页面说在 Expo 应用程序中使用不需要设置"

So im trying to make native-maps work within an expo app and the documentation page says that "No setup required for use within the Expo app"

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

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

But after installing the library with expo its not working.

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

I have 2 basic questions about why its not working:

1. 您将 Google 控制台中的 API 密钥放在哪里?
2. 如何在控制台上启用 Google Maps 与 expo 应用程序一起使用，启用 android sdk?

推荐答案

用法

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

You can just import the MapView from expo as react-native-maps is included in expo. (There aren't any integration or linking steps if you use expo and haven't ejected your app. I guess the documentation is not very clear about this...)

只需像这样从世博会导入:

Just import from expo like this:

import { MapView } from 'expo'

然后像往常一样使用它，并在 react-native- 文档中描述地图:

and than use it as usual and described in the documentation of 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 部分.

The api keys from the google play console belongs into the android and ios section of your app.json if you use expo.

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

add this to your app.json > android.config:

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

并将其添加到您的 app.json > ios.config:

and this to your app.json > ios.config:

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

你的 app.json 最后应该包含这样的内容(以及通常在那里的所有其他内容):

Your app.json should contain something like this in the end (and all of the other stuff which is usually in there):

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

这篇关于react-native-maps with expo的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！