如何将MapView组件的显示中心设置为用户当前位置

你现有代码里的showsUserLocation属性仅用于在地图上显示用户位置的蓝点标记，不会自动将地图视角移动到用户位置作为中心，你可以按以下步骤实现需求：

• 首先需要提前向用户申请位置权限，iOS端需要在Info.plist中配置NSLocationWhenInUseUsageDescription定位权限说明，Android端需要在AndroidManifest.xml中添加ACCESS_FINE_LOCATION权限声明。
• 调用定位能力获取用户当前的经纬度坐标，React Native原生环境可以使用react-native-geolocation-service库，Expo环境可以使用expo-location库获取定位数据。
• 将获取到的经纬度赋值给region对象的对应属性，同时配置合适的latitudeDelta和longitudeDelta参数控制地图的缩放范围，MapView绑定动态的region属性后就会自动将中心点切换到用户位置。

以下是完整的实现示例：

import Geolocation from 'react-native-geolocation-service';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import { Keyboard, StyleSheet } from 'react-native';
import { useState, useEffect } from 'react';

export default function MapScreen() {
  const [region, setRegion] = useState(null);

  useEffect(() => {
    // 权限申请逻辑可根据你使用的定位库对应文档实现，申请通过后调用定位接口
    Geolocation.getCurrentPosition(
      position => {
        const { latitude, longitude } = position.coords;
        setRegion({
          latitude,
          longitude,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        });
      },
      error => {
        console.log('获取定位失败', error);
      },
      { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
    );
  }, []);

  // 如果需要实现实时跟随用户位置更新中心点，可以监听位置更新事件，每次拿到新坐标更新region即可

  if (!region) return null;

  return (
    <MapView
      provider={PROVIDER_GOOGLE}
      initialRegion={region}
      style={styles.mapStyle}
      onPress={() => Keyboard.dismiss()}
      showsUserLocation
      region={region}
    />
  );
}

const styles = StyleSheet.create({
  mapStyle: {
    flex: 1,
  },
});

内容的提问来源于stack exchange，提问作者Daniel Corona