如何在反应原生博览会中访问相机？答案

【问题标题】：How to access camera in react native expo?如何在反应原生博览会中访问相机？
【发布时间】：2019-12-26 05:21:31
【问题描述】：

这是我在 React Native Expo App 中访问相机的代码。但是这段代码不起作用。它只显示空白屏幕，没有别的。如果需要任何更改或任何替代方法来实现这一点，请建议我。

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>
  );
}

【问题讨论】：

这是发生在设备上还是模拟器上？
您正在使用来自docs.expo.io/versions/latest/sdk/camera 的代码，该代码有效，相机在模拟器上不起作用。
我在设备上使用代码而不是在模拟器上
它在我的设备上运行试试这个零食snack.expo.io/…
先生，实际上我在控制台中收到此错误->“[未处理的承诺拒绝：TypeError：_expoCamera.Camera.requestPermissionsAsync 不是函数。（在'_expoCamera.Camera.requestPermissionsAsync（）'中， '_expoCamera.Camera.requestPermissionsAsync' 未定义）]"

标签： react-native expo

【解决方案1】：

您似乎以某种方式拒绝了 App 中的权限。同样在代码中，如果 hasPermission 为空，您将看到一个空白页。注意：在Ios中，如果您曾经拒绝或授予权限，则应用程序将永远不会再次显示权限弹出窗口，直到您使用链接并让用户从设置中启用权限。

【讨论】：

【解决方案2】：

Camera 组件不应在<SafeAreaView> 中

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

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

从<SafeAreaView /> 中删除<Camera /> 后我解决了这个问题

【讨论】：

【解决方案3】：

首先我使用的是：

"expo": "~40.0.0",

现在我正在升级 cli，然后使用 expo upgrade 一切都会自行修复：

"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",

【讨论】：

【解决方案4】：

现在看来，Camera.requestPermissionsAsync 已被弃用。您可以尝试使用 Camera.requestCameraPermissionsAsync()。更新代码后，弃用通知消失了。

【讨论】：

【解决方案5】：

模拟器摄像头不支持这个库，在安卓或者ios设备上试试，效果很好。

请查看this example 或原Expo-camera 库。

希望对您有所帮助。如有疑问，请随意

【讨论】：

上述代码有效，OP正在模拟器上使用代码。
先生，实际上我在控制台中收到此错误->“[未处理的承诺拒绝：TypeError：_expoCamera.Camera.requestPermissionsAsync 不是函数。（在'_expoCamera.Camera.requestPermissionsAsync（）'中， '_expoCamera.Camera.requestPermissionsAsync' 未定义）]"
试试这个stackoverflow.com/questions/38842499/…
先生，我没有得到这个
检查此示例链接并阅读它会让您更好地理解。

【解决方案6】：

我看到了您的代码，我觉得这段代码与 expo-camera 文档相同。我认为您正在 Emulator/Simulator 上尝试此代码。请尝试一次 物理设备。因为模拟器不支持摄像头。可以简单阅读文档https://docs.expo.io/versions/latest/sdk/camera/#requestpermissionsasync

【讨论】：

是的，它是相同的代码，我在手机上而不是在模拟器上运行它
@HimanshuMishra 试试这个snack.expo.io/…
好的。那么您应该尝试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('Sorry, we need camera roll permissions to make this work!'); } } }
先生，实际上我在控制台中收到此错误->“[未处理的承诺拒绝：TypeError：_expoCamera.Camera.requestPermissionsAsync 不是函数。（在'_expoCamera.Camera.requestPermissionsAsync（）'中， '_expoCamera.Camera.requestPermissionsAsync' 未定义）]"
看看这个stackoverflow.com/a/51179694/9444013