在我的React原生项目中,我正在使用expo构建一个将扫描二维码的应用程序。出于这个原因,我使用以下命令安装了以下软件包-
npm安装expo-条形码-扫描仪
我遵循了以下零食展示会的例子-
https://snack.expo.io/BJlFFcp2g
当我在我的设备上运行这个例子时,它可以工作。
但在我的React原生项目中,当我复制App.js文件中给出的相同代码时,在运行应用程序后,相机会打开,但扫描时没有显示任何结果。
这是代码-
App.js
import React, { Component } from 'react';
import { Alert, Linking, Dimensions, LayoutAnimation, Text, View, StatusBar, StyleSheet, TouchableOpacity } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';
export default class App extends Component {
state = {
hasCameraPermission: null,
lastScannedUrl: null,
};
componentDidMount() {
this._requestCameraPermission();
}
_requestCameraPermission = async () => {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({
hasCameraPermission: status === 'granted',
});
};
_handleBarCodeRead = result => {
if (result.data !== this.state.lastScannedUrl) {
LayoutAnimation.spring();
this.setState({ lastScannedUrl: result.data });
}
};
render() {
return (
<View style={styles.container}>
{this.state.hasCameraPermission === null
? <Text>Requesting for camera permission</Text>
: this.state.hasCameraPermission === false
? <Text style={{ color: '#fff' }}>
Camera permission is not granted
</Text>
: <BarCodeScanner
onBarCodeRead={this._handleBarCodeRead}
style={{
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
}}
/>}
{this._maybeRenderUrl()}
<StatusBar hidden />
</View>
);
}
_handlePressUrl = () => {
Alert.alert(
'Open this URL?',
this.state.lastScannedUrl,
[
{
text: 'Yes',
onPress: () => Linking.openURL(this.state.lastScannedUrl),
},
{ text: 'No', onPress: () => {} },
],
{ cancellable: false }
);
};
_handlePressCancel = () => {
this.setState({ lastScannedUrl: null });
};
_maybeRenderUrl = () => {
if (!this.state.lastScannedUrl) {
return;
}
return (
<View style={styles.bottomBar}>
<TouchableOpacity style={styles.url} onPress={this._handlePressUrl}>
<Text numberOfLines={1} style={styles.urlText}>
{this.state.lastScannedUrl}
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.cancelButton}
onPress={this._handlePressCancel}>
<Text style={styles.cancelButtonText}>
Cancel
</Text>
</TouchableOpacity>
</View>
);
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000',
},
bottomBar: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0,0,0,0.5)',
padding: 15,
flexDirection: 'row',
},
url: {
flex: 1,
},
urlText: {
color: '#fff',
fontSize: 20,
},
cancelButton: {
marginLeft: 10,
alignItems: 'center',
justifyContent: 'center',
},
cancelButtonText: {
color: 'rgba(255,255,255,0.8)',
fontSize: 18,
},
});
所以,我不明白-我应该怎么做才能让二维码扫描器工作?如果有人建议我解决这个问题,或者给我任何例子,这样我就可以实现它,那就太好了。
发布于 2019-06-13 03:38:28
我个人在使用https://github.com/moaazsidat/react-native-qrcode-scanner的库进行二维码扫描方面取得了更大的成功。试一试可能会解决你的问题?他们在自述文件中有一个入门指南,在这种情况下,我建议遵循这个指南。
发布于 2019-06-14 00:47:00
这是我的二维码扫描仪
import React, { Component } from 'react';
import { Alert, View, Text, Vibration, StyleSheet } from 'react-native';
import { Camera, BarCodeScanner, Permissions } from 'expo';
export default class ExpoScanner extends Component {
constructor(props) {
super(props);
this.onBarCodeRead = this.onBarCodeRead.bind(this);
this.renderMessage = this.renderMessage.bind(this);
this.scannedCode = null;
this.state = {
hasCameraPermission: null,
type: Camera.Constants.Type.back,
id_cedulacli: '',
placa:'',
monto:'',
fecha_pago:'Seleccione fecha'
};
}
async componentWillMount() {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
await this.setState({hasCameraPermission: status === 'granted'});
await this.resetScanner();
}
multaEdit = ({data, type}) =>{
if ((type === this.state.scannedItem.type && data === this.state.scannedItem.data) || data === null) {
return;
}
this.setState({ scannedItem: { data, type } });
const {placa} = this.state;
const {monto} = this.state;
const {fecha_pago} = this.state;
Vibration.vibrate();
console.log(`EAN scanned: ${data}`);
fetch('http://10.10.20.88/parciall/editarMul.php', {
method: 'post',
header:{
'Accept': 'application/json',
'Content-type': 'application/json'
},
body:JSON.stringify({
placa: placa,
monto: monto,
id_cedulacli: ''+`${data}`,
fecha_pago: fecha_pago,
})
})
.then((response) => response.json())
.then((responseJson) =>{
if(responseJson == "Actualización completada"){
alert(responseJson);
this.props.navigation.navigate("InicioScreen");
}else{
alert(responseJson);
}
})
.catch((error)=>{
console.error(error);
});
this.props.navigation.navigate('Inicio', { ean: data });
}
renderAlert(title, message) {
Alert.alert(
title,
message,
[
{ text: 'OK', onPress: () => this.resetScanner() },
],
{ cancelable: true }
);
}
onBarCodeRead({ type, data } ) {
if ((type === this.state.scannedItem.type && data === this.state.scannedItem.data) || data === null) {
return;
}
Vibration.vibrate();
this.setState({ scannedItem: { data, type } });
console.log(`EAN scanned: ${data}`);
}
renderMessage() {
if (this.state.scannedItem && this.state.scannedItem.type) {
const { type, data } = this.state.scannedItem;
return (
<Text style={styles.scanScreenMessage}>
{`Scanned \n ${type} \n ${data}`}
</Text>
);
}
return <Text style={styles.scanScreenMessage}>Focus the barcode to scan.</Text>;
}
resetScanner() {
this.scannedCode = null;
this.setState({
scannedItem: {
type: null,
data: null
}
});
}
render() {
const { hasCameraPermission } = this.state;
if (hasCameraPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={styles.container}>
<View style={{ flex: 1 }}>
<BarCodeScanner
onBarCodeScanned={this.multaEdit}
style={StyleSheet.absoluteFill}
/>
{this.renderMessage()}
</View>
</View>
);
}
}
https://stackoverflow.com/questions/56565602
复制相似问题