react-native-maps中animateToRegion配合region或initialRegion不生效问题排查

测试发现，在useEffect(() => {}, [])中调用animateToRegion同样无法生效。但如果绑定animateToRegion调用逻辑到按钮点击事件，或是在MapView的onPress/onLongPress事件中触发animateToRegion，此时animateToRegion配合region或initialRegion就可以正常运行。

核心使用代码 #

fitToMarker()会获取用户位置或默认位置，再将对应坐标传入animateToRegionHolder()方法：

const mapRef = React.useRef<MapView | null>(null);
  
const animateToRegionHolder = (lat: number, lng: number) => {
    if (mapRef.current) {
      mapRef.current.animateToRegion(
        {
          latitude: lat,
          longitude: lng,
          latitudeDelta: 0.2,
          longitudeDelta: 0.0421,
        },
        1000,
      );
    }
  };

<MapView
    ref={mapRef}
    onMapReady={fitToMarker}
    style={[S.MapsStyles.mapView, defineMapContainerStyle()]}
    /**
     * 该属性会不明原因导致fitToMarker失效
     * 但移除该属性会导致初始渲染时出现轻微动画（不符合预期）
     * initialRegion={O.region}
     */
>
</MapView>

依赖版本 #

• expo: ^43.0.0
• react-native-maps: 0.28.0

该问题的根源是同时使用onMapReady与initialRegion导致的，可通过条件化使用onRegionChangeComplete解决：需要地图拖拽功能时不启用该事件，需要执行初始animateToRegion动画时启用该事件即可。

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