我正在尝试在我的应用程序中实现一个功能,用户可以从他们的相机胶卷中选择一张图片,并且应用程序将解码图像中的QR码。
我目前正在使用react-native-camera-roll-picker:https://github.com/jeanpan/react-native-camera-roll-picker和react-native-qrcode-local-image:https://github.com/remobile/react-native-qrcode-local-image
问题是本地QR码图像库要求我传递本地路径,并且与react-native-camera-roll-picker提供的本机uri不兼容。我会使用另一个库来解码图像QR码但这个似乎是唯一适用于iOS和Android并从现有图像而不是从实际相机扫描的图像。
我也尝试过实现react-native-fetch-blob以暂时在本地保存相机胶卷图像,但这也给我带来了麻烦:https://github.com/wkh237/react-native-fetch-blob
这是我目前在一个函数中的尝试,我在react-native-camera-roll-picker的“回调”道具中调用(以前的尝试被注释掉了):
_pickedImage(array,currentImg) {
console.log(currentImg)
var path = RNFS.DocumentDirectoryPath + '/pickedqr';
let rnfbURI = RNFetchBlob.wrap(RNFetchBlob.fs.asset(currentImg.uri))
const Blob = RNFetchBlob.polyfill.Blob
Blob.build(rnfbURI, {type:'image/jpg'}).then((b) => {
tmpBlob = b;
RNFetchBlob.fs.readFile(tmpBlob, 'base64').then((data) => {
console.log("Base64", data)
QRDecoder.decode(`data:image/gif;base64,${data}`, (error, result)=>{
console.log("Code", result)
console.log("Error", error)
});
});
})
/*fullPath = currentImg.uri.replace("assets-library://", "cdvfile://localhost/assets-library/")
QRDecoder.decode(fullPath, (error, result)=>{
console.log("Code", result)
console.log("Error", error)
});*/
/*let blb = Blob.build( rnfbURI, { type: 'image/jpg'})
console.log(blb)*/
/*RNFetchBlob.fs.readFile(rnfbURI, 'base64').then((data) => {
console.log("Base64", data)
QRDecoder.decode(`data:image/gif;base64,${data}`, (error, result)=>{
console.log("Code", result)
console.log("Error", error)
});
})*/
}
我现在完全失去了所以任何方法或见解都会受到高度赞赏。
您可以使用react-native-qrcode-scanner
从图像或直接通过相机扫描QR。
安装:
使用此命令安装依赖项:
yarn add react-native-camera react-native-qr-scanner
使用以下方法链接这些库:
react-native link react-native-camera && react-native-qr-scanner
您需要将权限添加到项目的AndroidManifest.xml中。这应该在你的android/app/src/main/AndroidManifest.xml
中找到添加以下内容:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.VIBRATE"/>
对于iOS 10及更高版本,您需要将“隐私 - 相机使用说明”键添加到项目的info.plist中。这应该在your_project/ios/your_project/Info.plist
中找到。添加以下代码:
<key>NSCameraUsageDescription</key>
<string/>
<key>NSPhotoLibraryUsageDescription</key>
<string/>
<key>NSMicrophoneUsageDescription</key>
<string/>
<key>NSPhotoLibraryAddUsageDescription</key>
<string/>
用法:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {QRreader} from 'react-native-qr-scanner';
import ImagePicker from 'react-native-image-picker';
export default class Scanner extends Component {
constructor(props) {
super(props);
this.state = {
reader: {
message: null,
data: null
}
};
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={()=>{
this.openPhoto();
}}>
<Text style={{marginTop: 20}}>打开相册识别二维码</Text>
</TouchableOpacity>
<View>
{!this.state.reader? <Text>{!this.state.reader.message?'':`${this.state.reader.message}`}</Text>: <Text>{!this.state.reader.message?'':`${this.state.reader.message}:${this.state.reader.data}`}</Text>}
</View>
</View>
);
}
openPhoto(){
console.log('ImagePicker');
ImagePicker.launchImageLibrary({}, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
if(response.uri){
var path = response.path;
if(!path){
path = response.uri;
}
QRreader(path).then((data)=>{
this.setState({reader: {
message: '识别成功',
data: data
}});
// 十秒后自动清空
setTimeout(() => {
this.setState({reader: {
message: null,
data: null
}})
}, 10000);
}).catch((err)=>{
this.setState({reader: {
message: '识别失败',
data: null
}});
});
}
}
});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff'
}
});
你可以在这里阅读更多关于这个库的信息:https://www.npmjs.com/package/react-native-qr-scanner