React本地摄像机未出现在屏幕上

Question

我正在开发一个应用程序，该应用程序使用react原生相机读取二维码，但相机预览不会出现在屏幕上。

我正在使用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}}
/>

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

Answer 1

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

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

在iOS 10及更高版本中，您需要将"Privacy-Camera Usage Description"密钥添加到项目的Info.plist中。这应该在"your_project/ios/your_proProject/Info.plist"中找到。添加以下代码：NSCamera使用说明首次访问相机时，您给用户的信息

NSPhotoLibraryUsageDescription当首次访问照片库时，您给用户的信息

NSMicrophone使用说明首次访问麦克风时给用户的消息在Android上，您需要25.0.2+的buildToolsVersion。这应该可以通过Android Studio的SDK Manager轻松自动下载。

在iOS 11及更高版本上，您需要将NSPhotoLibraryAddUsageDescription密钥添加到Info.plist中。此密钥可用于描述应用程序寻求对用户照片库进行只读访问的原因。Info.plist可以在"your_project/ios/your_proProject/Info.plist"中找到。添加以下代码：

NSPhotoLibraryAddUsageDescription当首次访问照片库时，您给用户的信息

Answer 2

您可以在react-native-camera的支架中使用react-native-camera-kit。

按照以下步骤操作。

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
},
});

Answer 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>
);
}