仅在 react-native MapView 上设置初始区域

Question

用例：使用 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:），而不是为了地图渲染的目的而保存区域本身。

Answer 1

Region 是仅用于演示的属性，不要使用也不需要在现实生活中使用它...\n在现实生活中尝试此方法（示例）

\n\n

将我的动画重定位按钮带回用户当前位置，例如：

\n\n

\r\n

\r\n

<MapView initialRegion = {...some init region} onRegionChangeComplete = {region=>this.setState({region} ref={ref=>this.map=ref}>\r\n</MapView>\r\n\r\n<TouchableOpacity onpress={this.onRelocate}><Text>back to my position</Text></TouchableOpacity>\r\n\r\nonRelocate = () => {\r\nnavigator.geolocation.getCurrentPosition(\r\n      position => {\r\n        Toast.loading("\xe5\xae\x9a\xe4\xbd\x8d\xe4\xb8\xad...", 2);\r\n        let region = {\r\n          latitude: position.coords.latitude,\r\n          longitude: position.coords.longitude\r\n        };\r\n        this.map.animateToRegion(region)\r\n}

\r\n

\r\n

\r\n

\n