React-native-camera 没有出现在屏幕上

Posted 2023-03-11

【中文标题】React-native-camera 没有出现在屏幕上

【英文标题】：React-native-camera not appearing on screen

【发布时间】：2019-01-31 17:36:42

【问题描述】：

我正在开发一个使用 react-native-camera 读取 QR 码的应用，但屏幕上没有显示相机预览。

我正在使用react-native-camera 1.10.0 处理react-native 0.57.7。我已经运行了以下命令：

npm install react-native-camera --save

react-native link react-native-camera

这是我在代码中调用相机的地方：

import React, Component from 'react';
import View, Image, TouchableOpacity, ScrollView from 'react-native';
import RNCamera from 'react-native-camera';

class profPresencaScreen extends Component
<View style=flex: 1>
          <RNCamera 
              ref=ref => 
                this.camera = ref;
            
            defaultTouchToFocus
            mirrorImage=false
            permissionDialogTitle='Permission to use camera'
            permissionDialogMessage='We need your permission to use your camera phone'
            />
</View>


export default profPresencaScreen;

权限对话框打开，它甚至在我第一次打开应用程序时显示加载资产，但相机预览从未出现。有什么办法可以在我的应用上显示它？

---

编辑：我成功了！我手动设置了相机的样式：

<RNCamera 
              ref=ref => 
                this.camera = ref;
            
            defaultTouchToFocus
            mirrorImage=false
            permissionDialogTitle='Permission to use camera'
            permissionDialogMessage='We need your permission to use your camera phone'
            style=flex: 1
            />

就这么简单！感谢所有试图提供帮助的人！

【问题讨论】：

自动链接是否成功？您是否尝试过手动链接？

你是在设备上测试还是在模拟器上测试？

自动链接有效，但是当我试图手动链接它时，我看到有一些重复的命令。我要再测试一次！

我正在设备+模拟器上进行测试，两者的行为方式相同

嗨，你搞定了吗？我也遇到了同样的问题。

【参考方案1】：

您是否在 info.plist 文件中设置了权限？

基于文档： https://github.com/react-native-community/react-native-camera

对于 ios 10 及更高版本，您需要将“隐私 - 相机使用说明”键添加到项目的 Info.plist。这应该在“your_project/ios/your_project/Info.plist”中找到。添加以下代码： NSCameraUsageDescription 首次访问相机时向用户发送的消息

NSPhotoLibraryUsageDescription 首次访问照片库时您给用户的消息

NSMicrophoneUsageDescription 首次访问麦克风时您给用户的消息 在 android 上，您需要 buildToolsVersion 25.0.2+。这应该很容易被 Android Studio 的 SDK 管理器自动下载。

在 iOS 11 及更高版本上，您需要将 NSPhotoLibraryAddUsageDescription 键添加到 Info.plist。此键可让您描述您的应用程序寻求对用户照片库的只写访问权限的原因。 Info.plist 可以在“your_project/ios/your_project/Info.plist”中找到。添加以下代码：

NSPhotoLibraryAddUsageDescription 首次访问照片库时您给用户的消息

【参考方案2】：

您可以使用react-native-camera-kit 代替react-native-camera。

按照以下步骤操作。

1] npm install react-native-camera-kit --save
2] react-native link react-native-camera-kit

转到 YourReactNativeProject -> android -> app -> src -> main -> AndroidManifest.xml 并添加以下权限。

<uses-permission android:name="android.permission.CAMERA"/>

下面是相机/二维码扫描的相关代码。

import  StyleSheet, View, Text, Platform, TouchableOpacity, Linking, PermissionsAndroid  from 'react-native';

import  CameraKitCameraScreen,  from 'react-native-camera-kit';

export default class App extends Component 
  constructor() 

    super();

    this.state = 

      QR_Code_Value: '',

      Start_Scanner: false,

    ;
  

  openLink_in_browser = () => 

    Linking.openURL(this.state.QR_Code_Value);

  

  onQR_Code_Scan_Done = (QR_Code) => 

    this.setState( QR_Code_Value: QR_Code );

    this.setState( Start_Scanner: false );
  

  open_QR_Code_Scanner=()=> 

    var that = this;

    if (Platform.OS === 'android') 
      async function requestCameraPermission() 
        try 
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.CAMERA, 
              'title': 'Camera App Permission',
              'message': 'Camera App needs access to your camera '
            
          )
          if (granted === PermissionsAndroid.RESULTS.GRANTED) 

            that.setState( QR_Code_Value: '' );
            that.setState( Start_Scanner: true );
           else 
            alert("CAMERA permission denied");
          
         catch (err) 
          alert("Camera permission err", err);
          console.warn(err);
        
      
      requestCameraPermission();
     else 
      that.setState( QR_Code_Value: '' );
      that.setState( Start_Scanner: true );
    
  
  render() 
    if (!this.state.Start_Scanner) 

      return (
        <View style=styles.MainContainer>

          <Text style= fontSize: 22, textAlign: 'center' >React Native Scan QR Code Example</Text>

          <Text style=styles.QR_text>
            this.state.QR_Code_Value ? 'Scanned QR Code: ' + this.state.QR_Code_Value : ''
          </Text>

          this.state.QR_Code_Value.includes("http") ?
            <TouchableOpacity
              onPress=this.openLink_in_browser
              style=styles.button>
              <Text style= color: '#FFF', fontSize: 14 >Open Link in default Browser</Text>
            </TouchableOpacity> : null
          

          <TouchableOpacity
            onPress=this.open_QR_Code_Scanner
            style=styles.button>
            <Text style= color: '#FFF', fontSize: 14 >
              Open QR Scanner
            </Text>
          </TouchableOpacity>

        </View>
      );
    
    return (
      <View style= flex: 1 >

        <CameraKitCameraScreen
          showFrame=true
          scanBarcode=true
          laserColor='#FF3D00'
          frameColor='#00C853'
          colorForScannerFrame='black'
          onReadCode=event =>
            this.onQR_Code_Scan_Done(event.nativeEvent.codeStringValue)
          
        />

      </View>
    );
  

const styles = StyleSheet.create(

  MainContainer: 
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    alignItems: 'center',
    justifyContent: 'center',
  ,
  QR_text: 
    color: '#000',
    fontSize: 19,
    padding: 8,
    marginTop: 12
  ,
  button: 
    backgroundColor: '#2979FF',
    alignItems: 'center',
    padding: 12,
    width: 300,
    marginTop: 14
  ,
);

【参考方案3】：

我遇到了同样的问题，设置 captureAdio=false 帮助我解决了这个问题。

 render() 
    return (
      <Container>     
      <View style=StyleSheet.cameraContainer>
        <RNCamera
             ref=ref => 
               this.camera = ref;
             
            style = StyleSheet.preview
            type=RNCamera.Constants.Type.back
            flashMode=RNCamera.Constants.FlashMode.on
            captureAudio=false
            permissionDialogTitle='Permission to use camera'
            permissionDialogMessage='We need your permission to use your camera phone'
            onGoogleVisionBarcodesDetected=( barcodes ) => 
              console.log(barcodes)
            
        />
          <Button style = StyleSheet.capture 
                  full info large onPress=() => this.takePicture()>
              <Text> Take picture </Text>
          </Button>                 
      </View>
      </Container>
    );