react-native-maps with expo

iqb*_*125 8 react-native react-native-maps

所以我试图让原生地图在世博应用程序中工作,文档页面说“世博应用程序中不需要设置”

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

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

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

  1. 你把谷歌控制台的 API 密钥放在哪里?
  2. 你如何启用谷歌地图与控制台上的世博应用程序一起工作,启用android sdk?

Leo*_*Leo 31

用法

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

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

import { MapView } from 'expo'
Run Code Online (Sandbox Code Playgroud)

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

<MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
Run Code Online (Sandbox Code Playgroud)

Api 密钥的集成

如果您使用 expo,来自 google play 控制台的 api 密钥属于您的 app.json 的 android 和 ios 部分。

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

"googleMaps": { "apiKey": "<android maps api key>" }
Run Code Online (Sandbox Code Playgroud)

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

"googleMapsApiKey": "<ios maps api key>"
Run Code Online (Sandbox Code Playgroud)

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

{
    "expo": {
        "android": {
            "package": "com.company",
            "config": {
                "googleMaps": {
                    "apiKey": "<android maps key>"
                }
            }
        },
        "ios": {
            "bundleIdentifier": "com.company",
            "config": {
                "googleMapsApiKey": "<ios maps api key>"
            }
        }
    }
}
Run Code Online (Sandbox Code Playgroud)


Hae*_* Jo 8

2020 年夏季更新:

expo软件包不再支持其自己的内置MapView组件。所以,而不是像这样MapView从(如@Leo提到的)导入:expo

import { MapView } from 'expo';
Run Code Online (Sandbox Code Playgroud)

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

import MapView from 'react-native-maps';
Run Code Online (Sandbox Code Playgroud)

您可以使用此处显示的expo-cli错误消息中提到的命令或您选择的包管理器(例如或 )来下载react-native-maps 。npmyarn