我正在使用React Native Expo &我遇到了这个错误[Unhandled promise rejection:TypeError:Cannot read property 'getAvailableCameraDevices' of null]

vkc1a9a2  于 2023-06-06  发布在  React
关注(0)|答案(2)|浏览(223)

在我使用expo安装react-native-vision-camera后,我无法打开相机。
下面是我的代码:

const ScanProduct =({navigation})=>{

    // Camera
    const devices = useCameraDevices('wide-angle-camera')
    const device = devices.back

    React.useEffect(()=>{
      requestCameraPermission
  },[])

    // Handler
    const requestCameraPermission = React.useCallback(async ()=>{
        const permission = await Camera.requestCameraPermission();
        

        if(permission === 'denied') await Linking.openSettings()
    },[])

    function renderCamera(){
      
        if(device == null){
          return(
            <View
               style={{
                flex:1,
               }}
            />
          )

        } else{
          return(
            <View
              style={{
                flex:1
              }}
            >

              <Camera
                style={{flex:1}}
                device={device}
                isActive={true}
                enableZoomGesture
              
              />

            </View>
          )
        }
      
    }

    return(
        <View>

            {/*Camera*/}
            {renderCamera()}

        </View>
    )
}

之间我运行代码在我的iPhone使用世博会去应用程序和应用程序可以顺利运行,除了代码相机上面给我这个错误TypeError: Cannot read property 'getAvailableCameraDevices' of null.任何人都可以帮助我是高度赞赏

yzuktlbb

yzuktlbb1#

可能是您在使用效果时没有正确调用requestCameraPermission,错过了add()!?

requestCameraPermission();

另外,您不需要使用“else”,因为“if”已经有了return语句。

const ScanProduct = ({ navigation }) => {
  // Camera
  const devices = useCameraDevices("wide-angle-camera");
  const device = devices.back;

  React.useEffect(() => {
    requestCameraPermission();
  }, []);

  // Handler
  const requestCameraPermission = React.useCallback(async () => {
    const permission = await Camera.requestCameraPermission();

    if (permission === "denied") await Linking.openSettings();
  }, []);

  function renderCamera() {
    if (device == null) {
      return <View style={{ flex: 1 }} />;
    }

    return (
      <View style={{ flex: 1 }}>
        <Camera
          style={{ flex: 1 }}
          device={device}
          isActive={true}
          enableZoomGesture
        />
      </View>
    );
  }

  return (
    <View>
      {/*Camera*/}
      {renderCamera()}
    </View>
  );
};

否则我宁愿

const style = { flex: 1 }

const ScanProduct = ({ navigation }) => {
 // Permissions and useEffect...

  function RederCamera() {
    if (!device) return </>;

    return (          
      <Camera
        style={style}
        device={device}
        isActive={true}
        enableZoomGesture
      />          
    );
  }

  return (
    <View style={style}>
      <RederCamera />
    </View>
  );
};

</>

if (!device) return

或者只是

return (
    <View>
      {devive ? (
        <Camera style={style} device={device} isActive={true} enableZoomGesture />
      ) : null}
    </View>
  );
8cdiaqws

8cdiaqws2#

此错误似乎是一个构建问题。安装npm包并在app.json中添加插件后

{
  "name": "my app",
  "plugins": [
    [
      "react-native-vision-camera",
      {
        "cameraPermissionText": "$(PRODUCT_NAME) needs access to your Camera.",

        // optionally, if you want to record audio:
        "enableMicrophonePermission": true,
        "microphonePermissionText": "$(PRODUCT_NAME) needs access to your Microphone."
      }
    ]
  ]
}

然后,您需要通过键入重新构建应用程序。* 不要忘记根据需要更改平台和配置文件属性。*

eas build --platform ios --profile development

相关问题