React Native+Three.js开发报错：AndroidProgressBar不在THREE命名空间

报错信息 #

Error: R3F: AndroidProgressBar is not part of the THREE namespace! Did you forget to extend?

已尝试的排查步骤 #

• 验证three包已正确安装并导入
• 检查所有必要组件已正确扩展
• 确认要使用的组件已正确注册和导入

环境信息 #

• React Native版本：0.72.6
• 平台：Android/iOS

依赖库版本 #

"@react-three/drei": "^9.97.5",
"@react-three/fiber": "^8.0.0-beta.10",
"expo": "^49.0.0",
"expo-gl": "~13.0.1",
"r3f-native-orbitcontrols": "^1.0.9",
"react": "^18.0.0-rc.3",
"react-native": "0.72.6",

相关代码 #

import React, { Suspense } from 'react';
import { Canvas } from '@react-three/fiber/native';
import { OrbitControls } from '@react-three/drei';
import { View } from 'react-native';
import { heightPercentageToDP } from 'react-native-responsive-screen';
import Loader from '../../../../components/loader';
import Model from './model';

const Male_Army_Model = () => {
 return (
   <View style={{ flex: 1 }}>
     <Canvas
       shadows
       gl={{ antialias: true }}
       style={{ marginBottom: heightPercentageToDP(3) }}
     >
       <ambientLight intensity={1} />
       <pointLight position={[10, 70, 70]} intensity={1.5} castShadow />
       <directionalLight
         position={[5, 5, 5]}
         intensity={1.5}
         castShadow
         shadow-mapSize-width={2048}
         shadow-mapSize-height={2048}
       />
       <directionalLight
         position={[-5, -5, -5]}
         intensity={1.5}
         castShadow
         shadow-mapSize-width={2048}
         shadow-mapSize-height={2048}
       />
       <directionalLight
         position={[2, -2, 1]}
         intensity={1.5}
         castShadow
         shadow-mapSize-width={2048}
         shadow-mapSize-height={2048}
       />
       <directionalLight
         position={[-2, 2, -1]}
         intensity={1.5}
         castShadow
         shadow-mapSize-width={2048}
         shadow-mapSize-height={2048}
       />

       <OrbitControls
         enableRotate
         enableZoom={false}
         rotateSpeed={1.0} // Consider reducing the rotate speed for smoother control
         enablePan={false}
         maxZoom={0.6}
         minZoom={0.6}
         maxPolarAngle={Math.PI / 3.5}
         minPolarAngle={Math.PI / 3.5}
       />

       <Suspense fallback={<Loader />}>
         <Model />
       </Suspense>
     </Canvas>
   </View>
 );
};

export default Male_Army_Model;

解决思路 #

1. 调整Loader组件的层级：R3F的Canvas内部只能渲染Three.js/R3F兼容的3D对象，不能直接放入React Native原生UI组件（比如AndroidProgressBar）。检查自定义的Loader组件，如果包含原生UI，必须将其移出Canvas，放在外层View中，通过绝对定位覆盖在Canvas上方。

2. 重构Suspense位置：把Suspense移到Canvas外部，确保fallback的Loader作为React Native组件渲染，而非3D对象。示例结构：

<View style={{ flex: 1, position: 'relative' }}>
  <Suspense fallback={<View style={{ position: 'absolute', inset: 0, justifyContent: 'center', alignItems: 'center' }}><Loader /></View>}>
    <Canvas ...>
      {/* 3D内容 */}
      <Model />
    </Canvas>
  </Suspense>
</View>

3. 排查依赖兼容性：当前使用的@react-three/fiber是beta版本，可能与@react-three/drei存在版本冲突。尝试降级fiber到7.x稳定版，或升级到最新的8.x稳定版后重新测试。

4. 检查Model组件加载逻辑：确认Model组件内部是否间接引入了原生UI组件，比如在模型加载逻辑中错误混入了AndroidProgressBar相关代码。

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