React Native Maps 在 Android 构建时的常见问题与解决方案

问题背景

在使用 React Native Maps 库进行 Android 应用开发时，开发者经常会遇到构建失败的问题。特别是在 React Native 0.70 及以上版本中，当尝试构建 Android 应用时，会出现编译错误，提示找不到 com.facebook.react.fabric.interop 包中的相关类。

错误现象

构建过程中会出现以下典型错误信息：

• 无法找到 com.facebook.react.fabric.interop.UIBlockViewResolver 类
• 无法解析 UIBlockViewResolver 符号
• FabricUIManager 类中缺少 addUIBlock 方法

这些错误通常发生在使用较新版本的 React Native Maps（如 1.15.5 及以上）与较旧版本的 React Native（如 0.70 系列）组合时。

根本原因

React Native Maps 1.15.5 版本引入了一些与 React Native 新架构（Fabric）相关的改动。这些改动依赖于 React Native 0.74 及以上版本中才提供的 Fabric 相关接口。当开发者尝试在较低版本的 React Native 中使用这些新特性时，就会出现兼容性问题。

解决方案

方案一：版本降级

最直接的解决方案是将 React Native Maps 降级到兼容的版本：

1. 1.15.4 版本：已知在此版本中问题尚未出现
2. 1.14.0 版本：更保守的选择，兼容性更好

在 package.json 中指定具体版本：

"react-native-maps": "1.14.0"

然后执行：

npm install

方案二：修改源代码

对于需要保持最新版本但又无法升级 React Native 的情况，可以手动修改 node_modules 中的源代码：

1. 找到文件：node_modules/react-native-maps/android/src/main/java/com/rnmaps/maps/MapUIBlock.java
2. 替换为以下内容：

package com.rnmaps.maps;

import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.NativeViewHierarchyManager;
import com.facebook.react.uimanager.UIBlock;
import com.facebook.react.uimanager.UIManagerHelper;
import com.facebook.react.uimanager.UIManagerModule;

import java.util.function.Function;

public class MapUIBlock implements UIBlock {
    private int tag;
    private Promise promise;
    private ReactApplicationContext context;
    private Function<MapView, Void> mapOperation;

    public MapUIBlock(int tag, Promise promise, ReactApplicationContext context, Function<MapView, Void> mapOperation) {
        this.tag = tag;
        this.promise = promise;
        this.context = context;
        this.mapOperation = mapOperation;
    }

    @Override
    public void execute(NativeViewHierarchyManager nvhm) {
        MapView view = (MapView) nvhm.resolveView(tag);
        if (view == null) {
            promise.reject("AirMapView not found");
            return;
        }
        if (view.map == null) {
            promise.reject("AirMapView.map is not valid");
            return;
        }

        mapOperation.apply(view);
    }

    public void addToUIManager() {
        UIManagerModule uiManager = context.getNativeModule(UIManagerModule.class);
        uiManager.addUIBlock(this);
    }
}

方案三：升级 React Native

长期来看，最佳解决方案是将 React Native 升级到 0.74 或更高版本，这样可以获得更好的兼容性和性能。React Native Maps 1.15.5 及以上版本专门为 React Native 0.74+ 设计，利用了新架构的优势。

构建注意事项

无论采用哪种解决方案，在修改后都应执行以下步骤确保构建环境干净：

1. 删除 Android 构建缓存：

cd android && ./gradlew clean

2. 删除 node_modules 并重新安装：

rm -rf node_modules && npm install

3. 对于 iOS，还需要清理 pod 缓存：

cd ios && pod deintegrate && pod install

总结

React Native Maps 的版本兼容性问题在社区中较为常见。开发者应根据自身项目情况选择合适的解决方案。对于新项目，建议直接使用 React Native 0.74+ 和最新版 React Native Maps；对于已有项目，可根据实际情况选择降级或修改源代码的临时方案，同时规划向新版本的迁移路径。

理解这些兼容性问题的本质有助于开发者在面对类似问题时快速定位原因并找到解决方案，提高开发效率。