仅在 react-native MapView 上设置初始区域 [英] Only setting the initial region on a react-native MapView

问题描述

用例: 使用 react-native MapView 组件在地图上显示注释.初始地图区域设置为所有注释都可见.注释正在移动，这会触发重新渲染.此外，用户应该能够平移/缩放地图，因此 onRegionChange() 和 onRegionChangeComplete() 尝试捕获区域更改并将其设置为状态；通过这种方式，地图区域不会在发生重新渲染时重置为初始地图区域.

Use case: Annotations are displayed on a map, using the react-native MapView component. The initial map region is set so that all of the annotations are visible. Annotations are moving around, which triggers re-renders. In addition, the user should be able to pan/zoom around the map, so onRegionChange() and onRegionChangeComplete() attempt to capture region changes and set those in the state; in this way, the map region doesn't reset to the initial map region whenever a re-render occurs.

render: function() {
  ...
  return (
    <MapView
      region={this.state.region}
      annotations={annotations}
      onRegionChange={this.onRegionChange}
      onRegionChangeComplete={this.onRegionChangeComplete}
    />
  );
},

onRegionChange: function(region) {
  this.setState({ region });
},

onRegionChangeComplete: function(region) {
  this.setState({ region });
},

问题: 由于更新状态的延迟，在状态中设置更新的区域不允许在地图上获得平滑的平移/滚动体验.经过几次平移或缩放后，地图会冻结，大概是因为它使用的是保存在状态中的当前区域，而不是更新后的区域.等待 1-2 秒，地图可以再次平移/缩放，大概是因为该区域现在已经在状态中更新了.

Problem: Setting the updated region in the state doesn't allow for a smooth panning/scrolling experience on the map, due to the delay in updating the state. After a couple of pans or zooms, the map freezes, presumably because it is using the current region saved in the state, and not a more updated region. Wait 1-2 seconds, and the map can be panned/zoomed again, presumably because the region has now been updated in the state.

问题: 有没有办法只设置 MapView 的初始区域，这样重新渲染就不会导致该区域重置?这样，onRegionChange() 和 onRegionChangeComplete() 可以用作委托方法在新区域上执行工作(类似于 MKMapViewDelegate 的 mapView:regionWillChangeAnimated:)，而不是保存区域本身用于地图渲染.

Question: Is there a way to set the MapView's initial region only, such that a re-render doesn't cause the region to reset? That way, onRegionChange() and onRegionChangeComplete() can be used as delegate methods to perform work on the new region (analogous to MKMapViewDelegate's mapView:regionWillChangeAnimated:), rather than saving the region itself for the purposes of map rendering.

推荐答案

region 是一个仅用于演示的属性，不要使用，也不需要在现实生活中使用它...try(示例)

region is an attribute for demos only, don't use and do not need to use it for real life... try this method in real life(example)

将我的动画的重新定位按钮返回到用户当前位置，例如:

take mine relocate button of animate back to users current location for eg:

<MapView initialRegion = {...some init region} onRegionChangeComplete = {region=>this.setState({region} ref={ref=>this.map=ref}>
</MapView>

<TouchableOpacity onpress={this.onRelocate}><Text>back to my position</Text></TouchableOpacity>

onRelocate = () => {
navigator.geolocation.getCurrentPosition(
      position => {
        Toast.loading("定位中...", 2);
        let region = {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        };
        this.map.animateToRegion(region)
}

这篇关于仅在 react-native MapView 上设置初始区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！