Question

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

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

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}}
            />

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

Answer 1

我遇到了同样的问题，设置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>
    );
  }

Answer 2

您可以使用react-native-camera-kit的{{1}}支架。

请按照以下步骤操作。

react-native-camera

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

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

以下是相机/ QR码扫描的相关代码。

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

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

2 个答案: