react-native-maps with expo

拟墨画扇 提交于 2020-08-24 06:58:44

问题


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

But after installing the library with expo its not working.

I have 2 basic questions about why its not working:

  1. Where do you put the API key from Google console?
  2. How do you enable the Google Maps to work with the expo app on the console, enable the android sdk?

回答1:


Usage

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'

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,
    }}
  />

Integration of the Api key

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

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

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

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

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

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>"
            }
        }
    }
}


来源:https://stackoverflow.com/questions/57598520/react-native-maps-with-expo

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!