iOS上的React Native相机显示空白屏幕

Posted 2023-03-11

【中文标题】iOS上的React Native相机显示空白屏幕

【英文标题】：React Native camera on iOS is showing blank screen

【发布时间】：2019-06-09 19:33:58

【问题描述】：

我正在开发一个用于学习目的的 React Native 应用程序。我正在使用这个包，https://github.com/react-native-community/react-native-camera。但是当我打开相机页面/屏幕时，它只是显示空白屏幕，顶部有一个微调器，如下所示。

这是我的代码。

import React,  PureComponent  from "react";
import 
  StyleSheet,
  Text,
  TouchableOpacity,
  View
 from "react-native";
import  RNCamera  from "react-native-camera";

class EventDetails extends PureComponent 
  constructor(props) 
    super(props);
  

  render() 
    return (
      <View style=styles.container>
        <RNCamera
          ref=ref => 
            this.camera = ref;
          
          style=styles.preview
          type=RNCamera.Constants.Type.back
          flashMode=RNCamera.Constants.FlashMode.on
          androidCameraPermissionOptions=
            title: "Permission to use camera",
            message: "We need your permission to use your camera",
            buttonPositive: "Ok",
            buttonNegative: "Cancel"
          
          androidRecordAudioPermissionOptions=
            title: "Permission to use audio recording",
            message: "We need your permission to use your audio",
            buttonPositive: "Ok",
            buttonNegative: "Cancel"
          
          onGoogleVisionBarcodesDetected=( barcodes ) => 
            console.log(barcodes);
          
        />
        <View
          style= flex: 0, flexDirection: "row", justifyContent: "center" 
        >
          <TouchableOpacity
            onPress=this.takePicture.bind(this)
            style=styles.capture
          >
            <Text style= fontSize: 14 > SNAP </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  

  takePicture = async () => 
    if (this.camera) 
      const options =  quality: 0.5, base64: true ;
      const data = await this.camera.takePictureAsync(options);
      console.log(data.uri);
    
  ;


const styles = StyleSheet.create(
  container: 
    flex: 1,
    flexDirection: "column",
    backgroundColor: "black"
  ,
  preview: 
    flex: 1,
    justifyContent: "flex-end",
    alignItems: "center"
  ,
  capture: 
    flex: 0,
    backgroundColor: "#fff",
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: "center",
    margin: 20
  
);

export default EventDetails;

我的代码有什么问题？

这是我的 ios plist 文件的权限。

【问题讨论】：

你在真机上测试过吗？

【参考方案1】：

您已正确完成此操作，但您必须知道相机在模拟器上无法正常工作，但它可以在外部设备上正常工作

【讨论】：

我有相同的代码 sn-p 它出现在我的模拟器上，但屏幕空白，这是预期的。但是，当我在 iPhone 8 上打开它时，它只是崩溃而没有输出。

【参考方案2】：

重要提示： 在 ios 文件夹中，手动链接库后执行命令“pod install”。这解决了我的问题。