[英]How to scan a qr code in React Native cli?
有没有人有教程或代码如何在当前 React Native 版本中实际工作的 React Native cli 中读取二维码? 我尝试了很多教程和文档,但没有任何效果。 如果它能在 tsx 中工作,那就太好了。
使用 React Native 中的 react-native-qrcode-scanner 包扫描二维码。 这是您如何使用它的示例:
import QRCodeScanner from 'react-native-qrcode-scanner';
const MyQRCodeScanner = () => {
const onSuccess = (e) => {
console.log(e.data);
// e.data contains the QR code data
};
return (
<QRCodeScanner onRead={onSuccess} />
);
};
最好的解决方案是使用https://github.com/mrousavy/react-native-vision-camera因为它基于 ML Kit https://github.com/rodgomesc/vision-camera为这个相机使用 JSI 和帧处理器-代码扫描仪
import * as React from 'react';
import { StyleSheet, Text } from 'react-native';
import { Camera, useCameraDevices } from 'react-native-vision-camera';
import { useScanBarcodes, BarcodeFormat } from 'vision-camera-code-scanner';
export default function App() {
const [hasPermission, setHasPermission] = React.useState(false);
const devices = useCameraDevices();
const device = devices.back;
const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE], {
checkInverted: true,
});
// Alternatively you can use the underlying function:
//
// const frameProcessor = useFrameProcessor((frame) => {
// 'worklet';
// const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE], { checkInverted: true });
// runOnJS(setBarcodes)(detectedBarcodes);
// }, []);
React.useEffect(() => {
(async () => {
const status = await Camera.requestCameraPermission();
setHasPermission(status === 'authorized');
})();
}, []);
return (
device != null &&
hasPermission && (
<>
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
frameProcessor={frameProcessor}
frameProcessorFps={5}
/>
{barcodes.map((barcode, idx) => (
<Text key={idx} style={styles.barcodeTextURL}>
{barcode.displayValue}
</Text>
))}
</>
)
);
}
const styles = StyleSheet.create({
barcodeTextURL: {
fontSize: 20,
color: 'white',
fontWeight: 'bold',
},
});
您可以为 QR 码扫描仪使用两个库,然后添加所有权限
react-native-qrcode-scanner
react-native-camera
代码:
const [barcode, setBarcode] = useState(null);
<View style={styles.screen}>
<View style={styles.caption}>
<Text style={styles.captionTitleText}>QR Code</Text>
</View>
{barcode ? (
<View style={{alignContent: 'center', alignItems: 'center'}}>
<TouchableOpacity
style={{
backgroundColor: 'navy',
borderRadius: 10,
paddingHorizontal: 15,
}}
onPress={() =>
navigation.navigate('Your next screen')
}>
<Text style={styles.rmCameraResultText2}>
Scan Successfully. Tap to fill the Audit.
</Text>
</TouchableOpacity>
</View>
) : (
<RNCamera style={styles.rnCamera} onBarCodeRead={setBarcode} />
)}
<View style={styles.cameraControl}>
<TouchableOpacity style={styles.btn} onPress={() => setBarcode(null)}>
<Text style={styles.btnText}>New QR Scan</Text>
</TouchableOpacity>
</View>
</View>
const styles = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: '#F2F2FC',
},
saveArea: {
backgroundColor: '#62d1bc',
},
topBar: {
height: 50,
backgroundColor: '#62d1bc',
alignItems: 'center',
justifyContent: 'center',
},
topBarTitleText: {
color: '#ffffff',
fontSize: 20,
},
caption: {
height: 120,
justifyContent: 'center',
alignItems: 'center',
},
captionTitleText: {
color: '#121B0D',
fontSize: 16,
fontWeight: '600',
},
btn: {
width: 240,
borderRadius: 4,
backgroundColor: '#326A81',
paddingHorizontal: 20,
paddingVertical: 10,
marginVertical: 8,
},
btnText: {
fontSize: 18,
color: '#ffffff',
textAlign: 'center',
},
rnCamera: {
flex: 1,
width: '94%',
alignSelf: 'center',
},
rmCameraResult: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eeeeee',
},
rmCameraResultText: {
fontSize: 15,
color: '#326A81',
},
rmCameraResultText2: {
fontSize: 20,
color: 'white',
},
cameraControl: {
height: 180,
justifyContent: 'center',
alignItems: 'center',
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.