如何使用MapBox和React Native在单击的符号上将地图居中？

import React, { Component } from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';

MapboxGL.setAccessToken('YOUR_MAPBOX_ACCESS_TOKEN');

class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      centerCoordinate: [0, 0], // 初始中心点坐标
      zoomLevel: 10, // 初始缩放级别
    };
  }

  onSymbolPress = (event) => {
    const { geometry } = event.nativeEvent.payload;
    const { coordinates } = geometry;
    this.setState({ centerCoordinate: coordinates });
  };

  render() {
    const { centerCoordinate, zoomLevel } = this.state;

    return (
      <MapboxGL.MapView
        style={{ flex: 1 }}
        centerCoordinate={centerCoordinate}
        zoomLevel={zoomLevel}
      >
        <MapboxGL.SymbolLayer
          id="symbolLayer"
          style={{ iconImage: 'YOUR_SYMBOL_ICON' }}
          onPress={this.onSymbolPress}
        />
      </MapboxGL.MapView>
    );
  }
}

export default MapComponent;