小编Jed*_*Lau的帖子

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

用例:使用 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 });
},
Run Code Online (Sandbox Code Playgroud)

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

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

react-native react-native-maps

5
推荐指数
1
解决办法
7999
查看次数

标签 统计

react-native ×1

react-native-maps ×1