react-native-amap3d-fabric

React Native 高德地图组件，支持 Fabric (newArchEnabled=true)。

Fork of react-native-amap3d v3.2.4 by 7c00.

为什么有这个 Fork

上游 react-native-amap3d 已超过 3 年未更新，不支持 React Native 新架构 (Fabric)。当 newArchEnabled=true 时，Fabric interop 层为每个 ViewManager 生成 view config，调用 getExportedCustomDirectEventTypeConstants()。

ViewGroupManager 默认返回 null，Fabric 解析时抛出：

UnexpectedNativeTypeException: expected Array, got a null

应用在 JS bundle 加载阶段直接崩溃白屏。

本 fork 的目标：以最小改动让 react-native-amap3d 在 React Native 0.71+ Fabric 环境下正常运行，同时持续维护，适配新版 RN。

原始项目

| 项目 | 链接 | |------|------| | react-native-amap3d | https://github.com/qiuxiang/react-native-amap3d | | 原作者 | 7c00 ([email protected]) | | Fork 基于版本 | v3.2.4 | | 原项目许可证 | MIT |

本 fork 的所有改动均在原 MIT 许可证下发布。感谢原作者 7c00 的开源贡献。

Fork 修改清单

1. Fabric 兼容 — Android 7 个 ViewManager getExportedCustomDirectEventTypeConstants()

问题： Fabric interop 层要求 getExportedCustomDirectEventTypeConstants() 返回非 null Map，但 ViewGroupManager / SimpleViewManager 默认返回 null，导致 UnexpectedNativeTypeException 崩溃。

修改： 7 个 ViewManager 覆写该方法，返回 emptyMap()：

| 文件 | 类 | 对应组件 | |------|-----|----------| | MapViewManager.kt | ViewGroupManager<MapView> | AMapView | | MarkerManager.kt | ViewGroupManager<Marker> | AMapMarker | | PolylineManager.kt | ViewGroupManager<Polyline> | AMapPolyline | | PolygonManager.kt | SimpleViewManager<Polygon> | AMapPolygon | | CircleManager.kt | SimpleViewManager<Circle> | AMapCircle | | HeatMapManager.kt | SimpleViewManager<HeatMap> | AMapHeatMap | | MultiPointManager.kt | SimpleViewManager<MultiPoint> | AMapMultiPoint |

// Fabric: prevent "expected Array, got a null" crash
override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> {
    return emptyMap()
}

2. 隐私合规初始化

AMap SDK 9.x 要求在任何 API 调用前完成隐私合规设置。在 MapViewManager.createViewInstance() 中内联调用：

MapsInitializer.updatePrivacyAgree(reactContext, true)
MapsInitializer.updatePrivacyShow(reactContext, true, true)
AMapLocationClient.updatePrivacyAgree(reactContext, true)
AMapLocationClient.updatePrivacyShow(reactContext, true, true)

AndroidManifest.xml 中通过 amap_key meta-data 配置 API Key 即可，无需额外 JS 侧初始化。

3. 地图手势与 ScrollView 冲突修复

Android (MapView.kt)： 通过 setOnTouchListener 在 ACTION_DOWN 时请求父容器不要拦截触摸事件。

iOS (MapViewManager.swift)： 在 didMoveToSuperview() 中遍历视图树查找父级 UIScrollView，将所有地图手势 recognizer 设为父级 pan gesture 的依赖，确保地图优先响应。

4. 高德 Logo / 水印隐藏

新增 logoEnabled 属性（Android + iOS）：

<AMapView logoEnabled={false} />

• Android： 通过 UiSettings.setLogoLeftMargin(-2000) + setLogoBottomMargin(-2000) 将 logo 移出可视区域。不会调用 showMapText(false)，因此街道/地点标签正常显示。
• iOS： 通过 logoCenter = CGPoint(x: -500, y: -500) 移动 logo 到屏幕外。

5. 渲染帧率控制

新增 renderFps 属性（Android + iOS）：

<AMapView renderFps={60} />

• Android： 调用 AMap.setRenderFps(fps)
• iOS： 设置 maxRenderFrame = UInt(fps) + isAllowDecreaseFrame = false

6. 路线绘制

新增 routeData 属性（仅 Android），传入 JSON 字符串格式的坐标数组，在地图加载完成后自动绘制 geodesic 折线：

<AMapView routeData={JSON.stringify([
  { latitude: 39.9, longitude: 116.4 },
  { latitude: 39.8, longitude: 116.6 },
])} />

7. MapViewManager 组件精简

AMap3DPackage.kt 中只注册了 MapViewManager 和 MarkerManager，Polyline/Polygon/Circle/HeatMap/MultiPoint 的 Manager 未被注册到 package。如需使用这些组件，在 AMap3DPackage.kt 的 createViewManagers() 中添加对应的 Manager 实例。

8. iOS Props 对齐

MapViewManager.m 中新增 logoEnabled 和 renderFps 两个导出属性，保持与 Android 侧 API 一致。

安装

npm install react-native-amap3d-fabric
# or
yarn add react-native-amap3d-fabric

Android

android/app/src/main/AndroidManifest.xml 添加：

<application>
  <meta-data
    android:name="amap_key"
    android:value="YOUR_AMAP_KEY" />
</application>

iOS

ios/Podfile：

pod 'react-native-amap3d-fabric', :path => '../node_modules/react-native-amap3d-fabric'

使用

API 与原版 react-native-amap3d 完全兼容：

import { AMapView, AMapMarker, AMapPolyline } from 'react-native-amap3d-fabric';

<AMapView
  style={{ flex: 1 }}
  initialCameraPosition={{
    target: { latitude: 39.9, longitude: 116.4 },
    zoom: 12,
  }}
  logoEnabled={false}
  renderFps={60}
>
  <AMapMarker latLng={{ latitude: 39.9, longitude: 116.4 }} />
</AMapView>

从原版迁移

1. 将 package.json 中的 react-native-amap3d 替换为 react-native-amap3d-fabric（如果之前使用本地路径引用，切换为 npm 包名）
2. 将代码中的 import ... from 'react-native-amap3d' 替换为 import ... from 'react-native-amap3d-fabric'
3. android/settings.gradle 中无需手动 include（autolinking 自动处理）

兼容性

| React Native | AMap SDK (Android) | AMap SDK (iOS) | 状态 | |--------------|-------------------|----------------|------| | 0.71+ (Fabric) | 9.6.0 | 9.6.2 | ✅ 验证通过 | | 0.71+ (Paper) | 9.6.0 | 9.6.2 | ✅ 兼容（未测试） |

版本

| 日期 | 标签 | 说明 | |------|------|------| | 2026-07-27 | 3.2.4-fabric.1 | 首次发布：Fabric 兼容、隐私合规、手势修复、水印控制、渲染帧率、路线绘制、iOS 对齐 |

许可证

MIT License — 原始工作 Copyright (c) 2023 7c00，Fork 修改 Copyright (c) 2026 Contributors。

详见 license。