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

Question

用例:使用 react-native MapView 组件在 map 上显示注释。设置初始 map 区域，以便所有注释都可见。注释正在四处移动，这会触发重新渲染。此外，用户应该能够平移/缩放 map ，所以onRegionChange()和 onRegionChangeComplete() try catch 区域变化并将其设置为状态；这样，无论何时发生重新渲染， map 区域都不会重置为初始 map 区域。

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

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

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

Answer 1

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