错误：R3F：AndroidProgressBar 不是三个命名空间的一部分！你忘了延长吗？

Question

我正在开发一个 React Native 项目，并且使用 Three.js 来渲染 3D 内容。我遇到了以下错误：

 Error: R3F: AndroidProgressBar is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively

当我在加载 3D 内容时尝试渲染进度条时，会出现此错误。我已经尝试过以下步骤，但问题仍然存在：

1. 验证三个包是否正确安装并导入。
2. 检查所有必要的组件是否已正确扩展。
3. 确保我尝试使用的组件已正确注册和导入。

环境：

1. React Native 版本： 0.72.6
2. 平台：安卓/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;

任何见解或建议将不胜感激！

Answer 1

如果您查看错误，您将获得有关如何使用第三方对象的官方文档的链接。 您需要使用

extend

功能。

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

extend({ AndroidProgressBar });

const Male_Army_Model = () => {
  return (

    // ...

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

export default Male_Army_Model;