React native 在react本地地图中安装坐标后，“地图视图”将恢复为区域属性

在那里，我使用的是react本地映射。我在上面有一个地图视图，下面有一个表格。目前，我正在导航到另一个屏幕以获取两个位置。设置好这些位置后，我就可以在地图视图上显示坐标了。我通过在componentDidMount（）中添加“focus”侦听器实现了这一点。它工作得很好，但只要我开始在表单中输入一些内容，状态就会改变，它会重新渲染状态，并且地图会恢复到“区域”属性中提供的位置。以下是我使用的一些代码：

componentDidMount() {
    this.mapAnimationListener = this.props.navigation.addListener("focus", () => this.animateMap());
}

animateMap = () => {
if (
  this.props.map.pickup &&
  this.props.map.destination &&
  this.props.locationPermission
) {
  Axios.get(
    `https://maps.googleapis.com/maps/api/directions/json?origin=${this.props.map.pickup}&destination=${this.props.map.destination}&key=${environments.googleMapsAPIKey}`
  )
    .then((res) => {
      let points = Polyline.decode(
        res.data.routes[0].overview_polyline.points
      );
      let coords = points.map((point) => ({
        latitude: point[0],
        longitude: point[1],
      }));

      this.setState({
        distance: res.data.routes[0].legs[0].distance.text.split(" ")[0],
        eta: res.data.routes[0].legs[0].duration.text.split(" ")[0],
        coords,
      });

      this.mapRef.fitToCoordinates(
        [this.props.map.pickupMarker, this.props.map.destinationMarker],
        {
          edgePadding: {
            top: height / 10,
            bottom: height / 10,
            left: width / 10,
            right: width / 10,
          },
          animated: true,
        }
      );
    })
    .catch((err) => console.log({ err }));
}
};

render() {
    return (
         <MapView
          ref={(element) => (this.mapRef = element)}
          provider="google"
          zoomEnabled={false}
          rotateEnabled={false}
          scrollEnabled={false}
          paddingAdjustmentBehavior="always"
          loadingEnabled
          loadingIndicatorColor={blue}
          isAccessibilityElement={false}
          style={{ ...StyleSheet.absoluteFillObject }}
          region={{
            latitude: this.props.latitude,
            longitude: this.props.longitude,
            latitudeDelta: 0.001,
            longitudeDelta: 0.001,
          }}
        >
          {this.props.map.pickup && this.props.map.destination ? (
            <>
              <Marker
                tracksViewChanges={false}
                coordinate={this.props.map.pickupMarker}
              >
                <Icon name="map-marker" size={30} color="#0c2e62" />
              </Marker>

              <Marker
                tracksViewChanges={false}
                coordinate={this.props.map.destinationMarker}
              >
                <Icon name="map-marker-alt" size={30} color="#0c2e62" />
              </Marker>

              <Pl
                coordinates={this.state.coords}
                strokeWidth={3}
                strokeColor={darkBlue}
              />
            </>
          ) : this.props.map.pickup ? (
            <Marker coordinate={this.props.map.pickupMarker}>
              <Icon name="map-marker" size={30} color="#0c2e62" />
            </Marker>
          ) : this.props.map.destination ? (
            <Marker coordinate={this.props.map.destinationMarker}>
              <Icon name="map-marker-alt" size={30} color="#0c2e62" />
            </Marker>
          ) : (
            <Marker
              coordinate={{
                latitude: this.props.map.latitude,
                longitude: this.props.map.longitude,
              }}
            >
              <Icon name="map-marker" size={30} color="#0c2e62" />
            </Marker>
          )}
        </MapView>
    );
}

componentDidMount（）{
this.mapAnimationListener=this.props.navigation.addListener（“焦点”，（）=>this.animateMap（））；
}
动画映射=（）=>{
如果(
这个。道具。地图。皮卡&&
this.props.map.destination&&
此.props.locationPermission
) {
Axios.get(
`https://maps.googleapis.com/maps/api/directions/json?origin=${this.props.map.pick}&destination=${this.props.map.destination}&key=${environments.googleMapsAPIKey}`
)
。然后（（res）=>{
让点=多段线。解码(
res.data.routes[0]。概述\u polyline.points
);
让coords=points.map（（点）=>({
纬度：点[0]，
经度：点[1]，
}));
这是我的国家({
距离：res.data.routes[0]。支腿[0]。距离。文本。拆分（“”[0]，
eta:res.data.routes[0]。legs[0]。duration.text.split（“”[0]，
coords，
});
此.mapRef.fitToCoordinates(
[this.props.map.pickupMarker，this.props.map.destinationMarker]，
{
边缘添加：{
顶部：高度/10，
底部：高度/10，
左：宽度/10，
右：宽度/10，
},
是的，
}
);
})
.catch（（err）=>console.log（{err}））；
}
};
render（）{
返回(
（this.mapRef=element）}
provider=“谷歌”
zoomEnabled={false}
rotateEnabled={false}
scrollEnabled={false}
paddingAdjustmentBehavior=“始终”
可加载
LoadingIndicator颜色={blue}
isAccessibilityElement={false}
style={{…StyleSheet.absoluteFillObject}
区域={{
纬度：这个。道具。纬度，
经度：这个。道具。经度，
纬度德尔塔：0.001，
纵向德尔塔：0.001，
}}
>
{this.props.map.pick&&this.props.map.destination(
)：this.props.map.picking(
)：this.props.map.destination(
) : (
)}
);
}

我不明白。如何在坐标调整后阻止地图恢复到区域属性