如何在 IOS 和 Android 的 Expo 中 customize/style MapView？

Question

我在 https://mapstyle.withgoogle.com 上生成了一个样式，它给了我一个 JSON。

我关注了这里的信息：https://github.com/airbnb/react-native-maps

由于某种原因，样式不起作用。

Answer 1

在 IOS 上，默认情况下，它不是 google 映射打开的内容。
解决方法：
你需要在 MapView 中添加如下属性：provider = { MapView.PROVIDER_GOOGLE }

在 Android 上，它应该会立即运行。

这是一个工作示例：

import React from "react"; 
import { StyleSheet, Text } from "react-native"; 
import { MapView, Constants } from 'expo';

export default class MapScreen extends React.Component {
      render() {
        return (
          <MapView
            style = { styles.container }
            provider = { MapView.PROVIDER_GOOGLE }
            customMapStyle = { generatedMapStyle }
          />
        );} 
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

const generatedMapStyle = [...] // just paste the JSON here.

Answer 2

此外，请确保您已在 Google 云平台中为 iOS/Android 服务启用 Maps SDK，并在 app.json 中包含您的 API 密钥。我花了 4 个版本才发现....

如何在 IOS 和 Android 的 Expo 中 customize/style MapView？

How to customize/style MapView in Expo on IOS and Android?

google-maps

react-native

expo