Expo项目中Mapbox ModelLayer报错RNMBXModels.models.getter not implemented

我尝试在Mapbox中使用ModelLayer组件加载3D模型，已安装相关依赖包并执行npx expo prebuild生成原生代码，通过expo run:ios --device将App安装到iOS设备上。App和地图均可正常加载，但出现错误：
Mapbox [error] RNMBXModels.models.getter not implemented

我尝试用Expo Asset加载模型，将Models组件中的require替换为资源uri或localUri，但仍出现相同错误。测试了GLB和GLTF两种模型格式。

版本信息 #

• Mapbox版本：11.1.0
• React Native版本：0.73.4
• 平台：iOS
• @rnmapbox/maps版本：10.1.17

复现代码 #

metro.config.js #

const { getDefaultConfig } = require("expo/metro-config");
const config = getDefaultConfig(__dirname);
config.resolver.assetExts.push("gltf", "glb");
module.exports = config;

app.json #

{
  "expo": {
    "name": "my-app",
    "plugins": [
      [
        "@rnmapbox/maps",
        {
          "RNMapboxMapsVersion": "11.1.0",
          "RNMapboxMapsDownloadToken": "token..."
        }
      ]
    ]
  }
}

package.json #

{
  "dependencies": {
    "@rnmapbox/maps": "^10.1.17",
    "expo": "~50.0.6",
    "expo-asset": "~9.0.2",
    "expo-gl": "^13.6.0",
    "expo-three": "^7.0.0",
    "react": "18.2.0",
    "react-native": "0.73.4",
    "three": "^0.162.0"
  }
}

src/screens/explore/Main/Main.tsx #

import React from "react";
import { View } from "react-native";
import MapboxGL from "@rnmapbox/maps";

const MainContainer = () => {
  return (
    <View style={{ flex: 1 }}>
      <MapboxGL.MapView
        projection="globe"
        style={{ flex: 1 }}
        logoEnabled={false}
        compassEnabled
        compassFadeWhenNorth
        scaleBarEnabled={false}
        pitchEnabled
      >
        <MapboxGL.Models models={{ car: require("./model.glb") }} />
        <MapboxGL.Camera zoomLevel={1} animationDuration={1.5} />
        <MapboxGL.ShapeSource key={chunk.id} shape={chunk} id={chunk.id}>
          <MapboxGL.ModelLayer
            id={`example-id`}
            style={{
              modelId: "car",
            }}
          />
        </MapboxGL.ShapeSource>
      </MapboxGL.MapView>
    </View>
  );
};

export default MainContainer;

其他测试情况 #

• 使用<MapboxGL.Images images={{ example: require("./image.png") }} />搭配SymbolLayer可正常显示地图上的图片。
• 使用@react-three/fiber/native和@react-three/drei/native渲染模型可正常工作，代码如下：

import React, { Suspense } from "react";
import { View } from "react-native";
import { useFrame, Canvas } from "@react-three/fiber/native";
import { useGLTF, Environment } from "@react-three/drei/native";
import modelPath from "./model.glb";

function Model({ url, ...rest }) {
  const { scene } = useGLTF(url);
  useFrame(() => (scene.rotation.y += 0.01));
  return <primitive {...rest} object={scene} />;
}

const MainContainer = () => {
  return (
    <View style={{ flex: 1, backgroundColor: "red" }}>
      <Canvas gl={{ physicallyCorrectLights: true }} camera={{ position: [-6, 0, 16], fov: 36 }}>
        <color attach="background" args={[0xe2f4df]} />
        <ambientLight />
        <directionalLight intensity={1.1} position={[0.5, 0, 0.866]} />
        <directionalLight intensity={0.8} position={[-6, 2, 2]} />
        <Suspense>
          <Environment preset="park" />
          <Model url={modelPath} />
        </Suspense>
      </Canvas>
    </View>
  );
};

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