Question

这是我正在实现的用于在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>
  );
}

Answer 1

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

Answer 2

相机组件不应位于 <SafeAreaView>

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

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

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

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

Answer 4

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

Answer 5

模拟器相机不支持该库，请尝试在Android或Ios设备上使用，它将正常运行。

请检查this example或原始的Expo-camera库。

希望它有助于消除疑惑。

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

5 个答案: