react-native-maps 自定义 map 样式

Question

我使用谷歌地图样式向导创建了一个 json。然后我将其设置为渲染下的常量并将该常量设置为我的 MapView 样式，但当我这样做时它不会渲染任何内容。

我不确定这个问题，理想情况下我希望将样式放在一个单独的文件中，但我试图从小处着手。

如何解决当前遇到的问题以及从单独的文件中导入和使用样式？

这是一个snack of my code重现了我的确切错误以及下面的代码。

export default class Map extends React.Component {

 
  render() {
    const mapStyle = [
      {
        "featureType": "landscape.man_made",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.attraction",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.government",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ]

    return (
     <View style={{...StyleSheet.absoluteFillObject}}>
      <MapView
        style={mapStyle}
        provider={PROVIDER_GOOGLE}>
      </MapView>

      </View>
    );
  }
}

Answer 1

自定义谷歌地图样式必须传递给 customMapStyle prop 并且你需要设置一个特定的 width和 height在正常style MapView 的 Prop .设置absoluteFillObject根据 react-native documentation 做一些与您想象的不同的事情有

Currently, there is no difference between using absoluteFill vs. absoluteFillObject.

因此，absoluteFill适用于以下用例。

A very common pattern is to create overlays with position absolute and zero positioning (position: 'absolute', left: 0, right: 0, top: 0, bottom: 0), so absoluteFill can be used for convenience and to reduce duplication of these repeated styles.

这将不设置高度和宽度!我们需要手动执行此操作，记录在案 here .

以下解决了您的问题。

const styles = ScaledSheet.create({
  map: {
width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    
  },
...

JSX 组件。

return (
     <View style={{...StyleSheet.absoluteFillObject}}>
      <MapView
        style={styles.map}
        customMapStyle={mapStyle}
        provider={PROVIDER_GOOGLE}>
      </MapView>

      </View>
    );

这是完整的解决方案。

export default class Map extends React.Component {

  render() {
    const mapStyle = [
      {
        "featureType": "landscape.man_made",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.attraction",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.government",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ]
    
    return (
     <View style={{...StyleSheet.absoluteFillObject}}>
      <MapView
        style={styles.map}
        customMapStyle={mapStyle}
        provider={PROVIDER_GOOGLE}>
      </MapView>

      </View>
    );
  }
}

const styles = ScaledSheet.create({
  map: {
width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    
  },
  bubble: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 15,
  },
  carousel: {
    position: 'absolute',
    top: scale(625)
  },
  cardContainer: {
    backgroundColor: '#d1cfcf',
    height: scale(40),
    width: scale(300),
    borderRadius: 10,
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },

  name: {
    color: 'black',
    fontSize: 22,

  }
});

定义 customMapStyle在一个单独的文件中是纯 JS，可以按如下方式完成。

定义一个新文件，命名为CustomMapStyle.js并添加以下内容。

export const CustomMapStyle = [
      {
        "featureType": "landscape.man_made",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.attraction",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.government",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ]

然后按如下方式使用。

import {CustomMapStyle} from './CustomMapStyle'

...

render() {    
    return (
     <View style={{...StyleSheet.absoluteFillObject}}>
      <MapView
        style={styles.map}
        customMapStyle={CustomMapStyle}
        provider={PROVIDER_GOOGLE}>
      </MapView>

      </View>
    );
  }

我已经更新了your snack here .

最终结果。