5

ユースケース:反応ネイティブな 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: に類似)。

4

1 に答える 1

4

region はデモ専用の属性です。使用しないでください。実生活で使用する必要はありません...実生活 でこの方法を試してください(例)

たとえば、アニメーションの再配置ボタンをユーザーの現在の場所に戻します。

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

于 2018-12-18T15:51:54.693 に答える