javascript - 世博相机第一次显示黑屏: React-Native

Question

我用 expo-camera 创建了项目点击按钮打开相机。但是，当我第一次单击该按钮时，仅呈现黑屏，重新打开屏幕并单击同一按钮后，相机 UI 将在屏幕上呈现。

问题
我不知道为什么它首先显示黑屏。该问题仅存在于 android 设备中。
Link to Expo Snack在安卓设备上试试这个例子。

import React, { useState, useEffect, useContext } from 'react';
import {
  SafeAreaView,
  View,
  Text,
  Dimensions,
  ImageBackground,
  Image,
  Alert,
} from 'react-native';
import { Camera } from 'expo-camera';
import { Entypo, Ionicons, FontAwesome } from '@expo/vector-icons';
import { Surface, Button, TextInput } from 'react-native-paper';

const { width, height } = Dimensions.get('window');

let cameraRef;

const PickImage = ({ navigation }) => {
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);
  const [isCameraUiOn, setIsCameraUiOn] = useState(false);
  const [isCapturing, setIsCapturing] = useState(false);
  const [flashMode, setFlashMode] = useState(true);
  const [capturePhoto, setCapturePhoto] = useState(null);  


  const snap = async () => {
    if (cameraRef) {
      let photo = await cameraRef.takePictureAsync({
        quality: 0.5,
      });
      setCapturePhoto(photo.uri);
      setIsCapturing(false);
      setIsCameraUiOn(false);
    }
  };

  const getCameraPermission = async () => {
    const { status } = await Camera.requestPermissionsAsync();
    setHasPermission(status === 'granted');
  };

  useEffect(() => {
    getCameraPermission();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  if (isCameraUiOn) {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <Camera
            style={{ flex: 1 }}
            type={type}
            ref={(ref) => (cameraRef = ref)}
            flashMode={
              flashMode
                ? Camera.Constants.FlashMode.on
                : Camera.Constants.FlashMode.off
            }>
            <Entypo
              name="cross"
              color="#FFF"
              size={50}
              onPress={() => setIsCameraUiOn(false)}
            />
            <View
              style={{
                flex: 1,
                backgroundColor: 'transparent',
                display: 'flex',
                justifyContent: 'space-evenly',
                alignItems: 'flex-end',
                flexDirection: 'row',
                zIndex: 9999,
              }}>
              <Ionicons
                name="md-reverse-camera"
                color="#FFF"
                size={35}
                onPress={() => {
                  setType(
                    type === Camera.Constants.Type.back
                      ? Camera.Constants.Type.front
                      : Camera.Constants.Type.back
                  );
                }}
              />
              {isCapturing ? (
                <FontAwesome name="circle" color="#FFF" size={60} />
              ) : (
                <FontAwesome
                  name="circle-o"
                  color="#FFF"
                  size={60}
                  onPress={() => {
                    setIsCapturing(true);
                    snap();
                  }}
                />
              )}
              <Ionicons
                name="ios-flash"
                color={flashMode ? 'gold' : '#FFF'}
                size={35}
                onPress={() => setFlashMode(!flashMode)}
              />
            </View>
          </Camera>
        </View>
      </SafeAreaView>
    );
  }  else {
    return (
      <SafeAreaView style={{ flex: 1 }}>
          <View style={{ margin: 20 }}>
            <Text
              style={{
                fontSize: 25,
                fontWeight: '600',
              }}>
              Report Cattles with Ease !!
            </Text>

            <Text
              style={{
                marginVertical: 10,
              }}>
              Our System uses, cloud based fancy image detection algorithm to
              process your image.
            </Text>
          </View>

          <View
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Button
              style={{
                width: width * 0.5,
              }}
              icon="camera"
              mode="contained"
              onPress={() => setIsCameraUiOn(true)}>
              Press me
            </Button>
          </View>
      </SafeAreaView>
    );
  }
};

export default PickImage;

Link to snack Expo

Answer 1

我遇到了同样的问题，有人建议在渲染之前先征求许可