如何使用 React Native 更改 Google Mapview 折线描边样式虚线样式线？

Question

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

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

Answer 1

您应该使用

<Circle/>

而不是 `。下面是示例代码和代码片段。 （注意：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;

Answer 2

您可以在 ios 和 android 上使用折线描边

使用线条图案

代码：

<Polyline
    coordinates={[
        { latitude: 37.8025259, longitude: -122.4351431 },
        { latitude: 37.7896386, longitude: -122.421646 },
        { latitude: 37.7665248, longitude: -122.4161628 },
        { latitude: 37.7734153, longitude: -122.4577787 },
        { latitude: 37.7948605, longitude: -122.4596065 },
        // { latitude: 37.8025259, longitude: -122.4351431 }
    ]}
lineDashPattern={[5,5]}
    strokeColor="yellow" // fallback for when `strokeColors` is not supported by the map-provider
    strokeColors={[
        '#7F0000',
        '#00000000', // no color, creates a "long" gradient between the previous and next coordinate
        '#B24112',
        '#E5845C',
        '#238C23',
        // '#7F0000'
    ]}
    strokeWidth={5}
/>