如何在React Native Expo中访问相机?

3

这是我在React Native Expo应用中使用的代码,用于访问相机。但是这个代码不起作用。它只显示空白屏幕,什么也没有。如果需要更改或实现此功能的其他方法,请建议我。

import React, { useState, useEffect } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return (
    <View style={{ flex: 1 }}>
      <Camera style={{ flex: 1 }} type={type}>
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            flexDirection: 'row',
          }}>
          <TouchableOpacity
            style={{
              flex: 0.1,
              alignSelf: 'flex-end',
              alignItems: 'center',
            }}
            onPress={() => {
              setType(
                type === Camera.Constants.Type.back
                  ? Camera.Constants.Type.front
                  : Camera.Constants.Type.back
              );
            }}>
            <Text style={{ fontSize: 18, marginBottom: 50, color: 'red' }}> Flip </Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
}

这是在设备上还是模拟器上发生的? - kenmistry
您正在使用 https://docs.expo.io/versions/latest/sdk/camera/ 上的代码,它可以正常工作,但是在模拟器上摄像头无法工作。 - Junius L
我正在使用设备上的代码而不是模拟器上的。 - HIMANSHU MISHRA
1
先生,实际上我在我的控制台中遇到了这个错误-> "[Unhandled promise rejection: TypeError: _expoCamera.Camera.requestPermissionsAsync is not a function. (In '_expoCamera.Camera.requestPermissionsAsync()', '_expoCamera.Camera.requestPermissionsAsync' is undefined)]" - HIMANSHU MISHRA
6个回答

1

看起来Camera.requestPermissionsAsync现在已经过时了。您可以尝试使用Camera.requestCameraPermissionsAsync()。在我更新代码后,弃用通知消失了。


Camera.getCameraPermissionsAsync()已经过时。Camera.requestCameraPermissionsAsync()可以正常工作。谢谢。 - Shakir Baba

1

看起来你在应用程序中拒绝了权限。另外,在代码中,如果hasPermission为空,你将会看到一个空白页面。 注意:在iOS中,如果你曾经拒绝或授予权限,那么应用程序将永远不会再次显示权限弹窗,直到你使用链接并让用户从设置中启用权限。


0

相机组件不应该在 <SafeAreaView> 中。

<YOUR_CAMERA_COMPONENT /> /* <-- when outside the <SafeAreaView> , it work!*/

<SafeAreaView>
    <YOUR_CAMERA_COMPONENT />  /* <-- it will show blank view */
</SafeAreaView>

当我从<SafeAreaView />中移除了<Camera />时,问题得到了解决。


0

首先我正在使用:

"expo": "~40.0.0",

现在我正在升级CLI,然后使用Expo升级,一切问题都得到了解决:

"expo": "^41.0.0",
"expo-camera": "~11.0.2",
"expo-cli": "^4.4.1",
"expo-image-picker": "~10.1.4",
"expo-status-bar": "~1.0.4",
"firebase": "8.2.3",

-1

模拟器相机不支持此库,请在 Android 或 iOS 设备上使用,它将完美地工作。

请查看此示例或原始的Expo-camera库。

希望能帮到您。如有疑问,请随时提出。


以上代码有效,OP正在模拟器上使用该代码。 - Junius L
先生,实际上我在我的控制台中遇到了这个错误-> "[Unhandled promise rejection: TypeError: _expoCamera.Camera.requestPermissionsAsync is not a function. (In '_expoCamera.Camera.requestPermissionsAsync()', '_expoCamera.Camera.requestPermissionsAsync' is undefined)]" - HIMANSHU MISHRA
尝试这个 https://dev59.com/tFkT5IYBdhLWcg3wRNat - Anuj Sharma
先生,我不明白这个。 - HIMANSHU MISHRA
请查看此示例链接并阅读,这将使您更好地理解。 - Anuj Sharma

-2

是的,这是相同的代码,我正在手机上运行它而不是模拟器。 - HIMANSHU MISHRA
好的。那么你应该尝试使用 expo-permissions 并将以下代码添加到你的项目中:import * as Permissions from 'expo-permissions'; getPermissionAsync = async () => { if (Constants.platform.ios) { const { status } = await Permissions.askAsync(Permissions.CAMERA); if (status !== 'granted') { alert('抱歉,我们需要相机权限才能使其正常工作!'); } } } - shammi
先生,实际上我在控制台中遇到了这个错误 -> “[Unhandled promise rejection: TypeError:_expoCamera.Camera.requestPermissionsAsync不是一个函数。(在'_expoCamera.Camera.requestPermissionsAsync()'中,'_expoCamera.Camera.requestPermissionsAsync'未定义)]” - HIMANSHU MISHRA
请查看此链接 https://stackoverflow.com/a/51179694/9444013 - shammi
先生,我正在使用安卓手机。 - HIMANSHU MISHRA

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接