如何修复移动应用Scan Screen报错？点击Scan按钮调用相机功能受阻

错误梳理 #

从你提供的错误信息来看，存在两个核心问题：

1. TypeError: null is not an object (evaluating '_this2.camera.requestPermissionsAsync')：相机实例引用为null，无法调用权限请求方法
2. The component 'Camera' must be used within a <CameraProvider> component：相机组件未被要求的Provider包裹

修复步骤 #

1. 用CameraProvider包裹相机组件
   如果你使用的是expo-camera库，必须在应用顶层或Scan Screen的父组件中添加CameraProvider。修改App.js（或你的根组件）：

   import { CameraProvider } from 'expo-camera';
   
   export default function App() {
     return (
       <CameraProvider>
         {/* 这里放置你的导航组件或直接引入ScanScreen */}
       </CameraProvider>
     );
   }
   

2. 确保相机ref正确初始化
   在Scan Screen中，使用React的useRef（函数组件）或createRef（类组件）正确获取相机实例，避免调用方法时ref为null：

   // 函数组件示例
   import { Camera } from 'expo-camera';
   import { useRef } from 'react';
   import { Button } from 'react-native';
   
   export default function ScanScreen() {
     const cameraRef = useRef(null);
   
     const handleScan = async () => {
       if (!cameraRef.current) return;
       // 请求相机权限
       const { status } = await cameraRef.current.requestPermissionsAsync();
       if (status === 'granted') {
         // 权限通过后的扫描逻辑
       }
     };
   
     return (
       <>
         <Camera ref={cameraRef} style={{ flex: 1 }} />
         <Button title="Scan" onPress={handleScan} />
       </>
     );
   }
   

3. 完善权限配置与依赖

   • 确保已安装expo-camera：

     npx expo install expo-camera
     

   • 在app.json中添加平台权限说明：

     {
       "expo": {
         "ios": {
           "infoPlist": {
             "NSCameraUsageDescription": "需要访问相机以完成扫描操作"
           }
         },
         "android": {
           "permissions": ["CAMERA"]
         }
       }
     }
     

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