仅在反应原生MapView上设置初始区域

时间:2016-01-25 05:14:39

标签: react-native

使用案例:使用react-native MapView组件在地图上显示注释。设置初始地图区域,以便所有注释都可见。注释正在四处移动,触发重新渲染。此外,用户应该能够在地图上进行平移/缩放,因此onRegionChange()onRegionChangeComplete()会尝试捕获区域更改并将其设置为状态;这样,每当重新渲染发生时,地图区域都不会重置为初始地图区域。

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秒,地图可以再次平移/缩放,大概是因为该地区现在已经在该州更新。

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

1 个答案:

答案 0 :(得分:0)

region仅是用于演示的属性,不要在现实生活中使用它,也不需要使用它。 try this method in real life(example)

将动画的“我的重定位”按钮带回到用户当前位置,例如:

<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)
}