Expo Android端无法渲染React Three Fiber模型，Web端正常

核心问题分析 #

Web和Native端的React Three Fiber（R3F）实现存在差异，且meshStandardMaterial依赖光照才能渲染，Native端默认场景未配置足够光照，导致模型不可见。

具体解决步骤 #

1. 平台差异化导入Canvas
   Web和Native的Canvas组件实现不同，直接使用@react-three/fiber/native会导致Web端失效，需根据平台动态导入：

   import { Platform } from 'react-native';
   const Canvas = Platform.OS === 'web' 
     ? require('@react-three/fiber').Canvas 
     : require('@react-three/fiber/native').Canvas;
   

2. 添加必要的光照组件
   meshStandardMaterial需要光照才能呈现颜色和立体感，Native端R3F场景默认无光照，需手动添加：

   <Canvas>
     {/* 环境光提供基础照明 */}
     <ambientLight intensity={0.5} />
     {/* 方向光增强模型立体感 */}
     <directionalLight position={[5, 5, 5]} intensity={1} />
     <mesh>
       <boxGeometry />
       <meshStandardMaterial color="#ff9800" />
     </mesh>
   </Canvas>
   

3. 修复依赖版本兼容性
   确保expo-gl与Expo SDK版本匹配，运行以下命令修复依赖：

   npx expo install --fix
   

4. 清除缓存重新加载

   • 在Android设备上关闭Expo Go应用，重新打开后加载项目
   • 或在本地运行命令清除缓存后重启：

     npx expo start -c
     

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