Reactjs 在地图中选择标记时如何设置放大？

如何仅为地图上选定的标记设置缩放，而不为聚焦位置设置缩放？ 这是我的密码： 我尝试了很多代码，但还没有成功

export default class Mapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      focusedLocation: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta:
          (Dimensions.get('window').width / Dimensions.get('window').height) *
         0.00522,
      },
      locations: locations,
    };
    this.switchMapType = this.switchMapType.bind(this);
  }

  onPressZoomIn() {
    this.region = {
      latitude: this.state.focusedLocation.latitude,
      longitude: this.state.focusedLocation.longitude,
      latitudeDelta: this.state.focusedLocation.latitudeDelta * 0.5,
      longitudeDelta: this.state.focusedLocation.longitudeDelta * 0.5,
    };

    this.setState({
      focusedLocation: {
        latitudeDelta: this.region.latitudeDelta,
        longitudeDelta: this.region.longitudeDelta,
        latitude: this.region.latitude,
        longitude: this.region.longitude,
      },
    });
    this.map.animateToRegion(this.region, 500);
  }

  onPressZoomOut() {
    this.region = {
      latitude: this.state.focusedLocation.latitude,
      longitude: this.state.focusedLocation.longitude,
      latitudeDelta: this.state.focusedLocation.latitudeDelta / 0.5,
      longitudeDelta: this.state.focusedLocation.longitudeDelta / 0.5,
    };
    this.setState({
      focusedLocation: {
        latitudeDelta: this.region.latitudeDelta,
        longitudeDelta: this.region.longitudeDelta,
        latitude: this.region.latitude,
        longitude: this.region.longitude,
      },
    });
    this.map.animateToRegion(this.region, 500); 
  }
  render() {
    return (
      <View style={styles.container}>
       <StatusBar hidden />
        <MapView
          //initialRegion={initialRegion}
          style={styles.mapView}
          rotateEnabled={true}
          scrollEnabled={true}
          showsMyLocationButton={false}
          showsUserLocation={true}
          zoomEnabled={true}
          mapType={this.state.mapType}
          showsPointsOfInterest={false}
          showBuildings={false}
          onMapReady={this._mapReady}
          ref={ref => (this.map = ref)}>
          {locations.map(
            (locations, id, latitude, longitude, hora, linha, prestadora) => (
              console.log(locations.latitude, locations.latitude),
              (
                <MapView.Marker
                  onPress={this.pickLocationHandler}
                  ref={mark => (locations.mark = mark)}
                  key={id}
                  title={locations.linha + ' - ' + locations.prestadora}
                  pinColor={'tomato'}
                  description={
                    'Aguarde o seu transporte a partir de: ' + locations.hora
                  }
                  coordinate={{
                    latitude: JSON.parse(locations.latitude),
                    longitude: JSON.parse(locations.longitude),
                  }}
                />
              )
            )
          )}
        </MapView>
        ...
        <ScrollView
          style={styles.placesContainer}
          horizontal
          pagingEnabled
          showsHorizontalScrollIndicator={false}
          onMomentumScrollEnd={e => {
            const locations =
              e.nativeEvent.contentOffset.x > 0
                ? e.nativeEvent.contentOffset.x / Dimensions.get('window').width
                : 0;

            const { latitude, longitude, mark } = this.state.locations[
              locations
            ];

            this.map.animateToCoordinate(
              {
                latitude: JSON.parse(latitude),
                longitude: JSON.parse(longitude),
              },
              500
            );

            setTimeout(() => {
              mark.showCallout();
            }, 500);
          }}>
          {locations.map(locations => (
            <View key={locations.id} style={styles.place}>
              <Text style={styles.title}>Ponto {locations.id} </Text>
              <Text style={styles.text}>A partir de: {locations.hora}</Text>
              <Image
                source={require('./assets/expo.symbol.white.png')}
                style={{
                  marginLeft: Dimensions.get('window').width / 1.5,
                  width: 67,
                  height: 67,
                  tintColor: '#FF3D00',
                }}
              />
            </View>
          ))}
        </ScrollView>
      </View>
    );
  }
}

---

首先移动到标记，然后放大

移动到标记

this.refs.map.animateToRegion({
     latitude: markerLat,
     longitude: markerLong,
})

然后放大 聚焦定位。

我找到了一个解决方案：

第一:

---

此代码将放大您感兴趣的第一个标记。。退房

您好，我是这门语言的新手，您能更新我可以测试它的代码吗？请添加更多的代码，比如pickLocationHandler方法。我现在刚刚添加。

this.refs.map.animateToRegion({
     latitude: markerLat,
     longitude: markerLong,
})

  _mapReady = () => {
    this.state.locations[0].mark.showCallout();
    this.animate(); <---ADD THIS METHOD
  };

  animate(){
    let r = {
        latitude: JSON.parse(this.state.locations[0].latitude),
        longitude: JSON.parse(this.state.locations[0].longitude),
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta:
        (Dimensions.get('window').width / Dimensions.get('window').height) *
        0.00522,
    }; 
    this.map.animateToRegion(r, 500);
}