迁移至rnmapbox/maps后Mapbox地图iOS正常加载Android失败求助

原本使用react-native-mapbox-gl/maps时iOS端地图可正常运行，替换为基于Maplibre的rnmapbox/maps后，iOS仍正常加载，但Android端地图显示空白（模拟器仅显示Maplibre标识），且控制台无错误输出。相关代码如下：

<MapboxGL.MapView style={editStyles.map} onRegionIsChanging={(features) => handleRegionChange(features)}
    styleURL='mapbox://styles/accessos/ckh0y1uzb03gr19s1rkbjhx2v?optimize=true'
    onDidFinishLoadingMap={() => handleMapLoad()}
    onDidFinishRenderingFrame={() => handleMapLoad()}
    >
    <MapboxGL.BackgroundLayer style={editStyles.mapLayer} id={'Filter Layer'} />
    <TouchableOpacity style={editStyles.recenterContainer} onPress={() => {
        setCoordinates([coordinates[0] + 0.0000001, coordinates[1]]);
        setConfigCoordinates([coordinates[0], coordinates[1]]);
        reverseGeocode(coordinates[0], coordinates[1], apiKey);
        getBounds();
    }}>
        <Image source={require('../assets/recenterbutton.png')} style={editStyles.recenterButton} />
    </TouchableOpacity>
    <MapboxGL.Camera
        zoomLevel={16}
        centerCoordinate={coordinates}
        animationDuration={0}
        maxBounds={bounds}
      />
    <MapboxGL.ShapeSource id="bounds" shape={polygon}>
        <MapboxGL.FillLayer id="boundsFill" style={boundsStyle} />
        <MapboxGL.LineLayer id="layer1" style={searchStyles.lineLayer} />
      </MapboxGL.ShapeSource>
  <MapboxGL.PointAnnotation coordinate={coordinates} id='p2' >
        <View style={editStyles.currentOuterMarker}>
            <View style={editStyles.currentMarker} />
        </View>
    </MapboxGL.PointAnnotation>
    <MapboxGL.PointAnnotation coordinate={configCoordinates} id='p3' >
        <View style={editStyles.outerMarker}>
            <View style={editStyles.marker} />
        </View>
    </MapboxGL.PointAnnotation>
  </MapboxGL.MapView>

排查与解决步骤 #

• 检查Android依赖配置

  1. 确认android/build.gradle中添加了Maplibre的Maven仓库：

     allprojects {
       repositories {
         // 其他仓库
         maven { url 'https://maven.maplibre.org' }
       }
     }
     

  2. 核对android/app/build.gradle中的依赖版本，确保与rnmapbox/maps版本匹配，无版本冲突。

• 验证StyleURL与权限

  1. 当前使用的是Mapbox风格URL，若依赖Mapbox服务，需在AndroidManifest.xml中配置Mapbox令牌：

     <meta-data
         android:name="com.mapbox.token"
         android:value="你的Mapbox访问令牌"/>
     

     若想完全基于Maplibre，建议改用Maplibre官方风格URL，例如maplibre://styles/maplibre/light-v11，避免依赖Mapbox服务。
  2. 确保AndroidManifest.xml中添加了必要权限：

     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     

• 排查ShapeSource与图层问题

  1. 临时注释掉<MapboxGL.ShapeSource>相关代码，测试地图是否能加载。若能加载，说明polygon数据格式错误，或boundsStyle、searchStyles.lineLayer的样式属性不符合Maplibre规范（部分Mapbox样式属性在Maplibre中有差异）。
  2. 检查polygon的GeoJSON格式是否正确，确保是标准的多边形结构。

• 抓取原生日志
  使用Android Studio的Logcat工具，过滤Maplibre或rnmapbox相关标签，查看原生层面的错误信息，这可能是控制台未输出的关键线索。

• 版本兼容性验证
  核对React Native版本、rnmapbox/maps版本与Android SDK版本是否兼容，参考rnmapbox/maps官方文档的版本适配表。

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