反应原生在地图上画一个圆圈

Question

这可能很简单,但没有任何人在网上提供如何做到这一点的实际例子,我只是无法让它工作.

这是我的render()函数,这是我应该做的全部吗？:

render() {
    return (
    <MapContainer>
        <MapView.Circle
            center = {{ latitude: this.state.currentLatitude || 30, longitude: this.state.currentLongitude || 120 }}
            radius = { 1000 }
            strokeColor = "#4F6D7A"
            strokeWidth = { 2 }
        />
        <MapView 
            style = { styles.map }
            region = { this.state.mapRegion }
            showsUserLocation = { true }
            followUserLocation = { true }
            onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }>
        </MapView>
        <MessageBar />           
    </MapContainer>
    )
}

我已经尝试将MapView.Circle标记放在MapView标记的上方和下方,但它没有任何区别.

有人有这个工作吗？

Answer 1

以下是可能正在努力解决此问题的其他任何人的工作代码:

RADIUS = 500;

class Map extends Component {

state = {
    mapRegion: null,
    currentLatitude: null,
    currentLongitude: null,
    LATLNG: {
        latitude: -35
        longitude: 120
    },
}

render() {
    return (
    <MapContainer>
        <MapView 
            style = { styles.map }
            region = { this.state.mapRegion }
            showsUserLocation = { true }
            followUserLocation = { true }
            onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }>
        <MapView.Circle
                key = { (this.state.currentLongitude + this.state.currentLongitude).toString() }
                center = { this.state.LATLNG }
                radius = { RADIUS }
                strokeWidth = { 1 }
                strokeColor = { '#1a66ff' }
                fillColor = { 'rgba(230,238,255,0.5)' }
                onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }
        />
        </MapView>
        <MessageBar />           
    </MapContainer>
    )
}