如何使用 React Native 更改 Google Mapview Polyline Stroke Style Dashed Style Line？答案

【问题标题】：How to change Google Mapview Polyline Stroke Style Dashed Style Line Using React Native?如何使用 React Native 更改 Google Mapview Polyline Stroke Style Dashed Style Line？
【发布时间】：2021-07-18 23:50:19
【问题描述】：

在我的场景中，我使用“react-native-maps”npm 包在我的应用程序中实现了 Google MapView。在这个包中，根据我的要求，我必须绘制一条虚线圆折线，如下面提到的图像绿线应该是虚线样式。如何将其更改为虚线或点划线样式。

enter image description here

<Polyline
            coordinates={[
              { latitude: 37.88045, longitude: -122.4324 },
              { latitude: 37.78825, longitude: -122.3903 },
            ]}
            strokeWidth={3}
            lineDashPattern={[170, 170]}
          />

【问题讨论】：

标签： android ios typescript react-native google-maps

【解决方案1】：

您应该使用<Circle/> 而不是`。这是sample code 和下面的代码 sn-p。 （注意：lineDashPattern 仅在 iOS 中可用，doc）。

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView, { Marker, Circle, Polyline } from 'react-native-maps';


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});


class MapApp extends Component {
  render() {
    return (
      <View style={styles.container}>

        <MapView style={styles.map}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        >
          <Marker
            coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
          />

          <Circle
            center={{ latitude: 37.78825, longitude: -122.4324 }}
            radius={1000}
            strokeWidth={3}
            strokeColor="green"
            lineDashPattern={[10]} />


        </MapView>
      </View>
    );
  }
}

export default MapApp;

【讨论】：