Expo 45升级至46后react-native-maps的MapView异常缩放到全球视图

以下是几个经过验证的解决思路，按优先级尝试：

1. 改用受控region属性+手动设置地图区域 #

initialRegion仅在组件首次挂载生效，若组件因其他原因重渲染，可能出现区域重置问题。改用受控的region属性，并在组件挂载时强制设置地图区域：

import { useRef, useEffect } from 'react';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import { Dimensions } from 'react-native';

const { width: windowWidth, height: windowHeight } = Dimensions.get('window');
const fixedRegion = {"latitude": 33.745879288794235, "latitudeDelta": 0.0922, "longitude": -117.78628578420522, "longitudeDelta": 0.0411};

const YourMapComponent = () => {
  const mapRef = useRef(null);

  useEffect(() => {
    // 组件挂载后强制设置地图区域
    if (mapRef.current) {
      mapRef.current.animateToRegion(fixedRegion, 0);
    }
  }, []);

  return (
    <MapView 
      ref={mapRef}
      style={{ width: windowWidth, height: windowHeight }} 
      provider={PROVIDER_GOOGLE}
      region={fixedRegion}
      showsUserLocation={true}
      customMapStyle={mapStyle}
      // 阻止用户位置获取后自动缩放
      followUserLocation={false}
      showsMyLocationButton={false}
    />
  );
};

注意：移除原style中的justifyContent: 'center', alignItems: 'center'，MapView不需要这些布局属性，可能干扰渲染尺寸。

2. 清除缓存并重新安装依赖 #

Expo升级后缓存可能导致依赖冲突，执行以下步骤：

• 运行expo r -c清除Expo开发服务器缓存
• 删除项目根目录的node_modules文件夹和package-lock.json
• 重新执行npm install

3. 检查react-native-maps与Expo版本兼容性 #

你当前使用的react-native-maps@0.31.1是Expo 46的官方适配版本，但如果上述方法无效，可以尝试临时降级到0.30.2（Expo 45对应的版本），验证是否是版本适配问题：

npm install react-native-maps@0.30.2

4. 避免useWindowDimensions引发的重渲染 #

useWindowDimensions会在屏幕尺寸变化时触发组件重渲染，可能导致MapView重置区域。改用Dimensions.get('window')获取固定尺寸，减少不必要的重渲染。

内容的提问来源于stack exchange，提问作者Vaibhav Verma