最近项目中要用到扫描二维码功能,网上找了一圈遇到不少坑,要么是代码太老无法运行,要么是效果不符合。把最终实现分享给大家。
function组件写法
实现效果如下:
代码:
import {RNCamera} from 'react-native-camera'; import React, {useEffect, useRef} from 'react'; import { StyleSheet, Animated, PermissionsAndroid, default as Easing, ImageBackground, View, Text, } from 'react-native'; let camera; const ScanQRCode = () => { const moveAnim = useRef(new Animated.Value(-2)).current; useEffect(() => { requestCameraPermission(); startAnimation(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); //请求权限的方法 const requestCameraPermission = async () => { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, { title: '申请摄像头权限', message: '扫描二维码需要开启相机权限', buttonNeutral: '等会再问我', buttonNegative: '不行', buttonPositive: '好吧', }, ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { console.log('现在你获得摄像头权限了'); } else { console.log('用户没有允许相机权限'); } } catch (err) { console.warn(err); } }; /** 扫描框动画*/ const startAnimation = () => { Animated.sequence([ Animated.timing(moveAnim, { toValue: 200, duration: 1500, easing: Easing.linear, useNativeDriver: false, }), Animated.timing(moveAnim, { toValue: -1, duration: 1500, easing: Easing.linear, useNativeDriver: false, }), ]).start(() => startAnimation()); }; const onBarCodeRead = (result) => { const {data} = result; //只要拿到data就可以了 //扫码后的操作 console.log(data); alert(data); }; return ( { camera = ref; }} autoFocus={RNCamera.Constants.AutoFocus.on} /*自动对焦*/ style={[styles.preview]} type={RNCamera.Constants.Type.back} /*切换前后摄像头 front前back后*/ flashMode={RNCamera.Constants.FlashMode.off} /*相机闪光模式*/ onBarCodeRead={onBarCodeRead}>{ width: 500, height: 220, backgroundColor: 'rgba(0,0,0,0.5)', }} /> { backgroundColor: 'rgba(0,0,0,0.5)', height: 200, width: 200, }} />{width: 200, height: 200}}> { backgroundColor: 'rgba(0,0,0,0.5)', height: 200, width: 200, }} />{ flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)', width: 500, alignItems: 'center', }}>将二维码放入框内,即可自动扫描); }; const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', }, preview: { flex: 1, justifyContent: 'center', alignItems: 'center', }, rectangleContainer: { flex: 1, justifyContent: 'flex-end', alignItems: 'center', }, rectangle: { height: 200, width: 200, borderWidth: 1, borderColor: '#fcb602', backgroundColor: 'transparent', borderRadius: 10, }, rectangleText: { flex: 0, color: '#fff', marginTop: 10, }, border: { flex: 0, width: 196, height: 2, backgroundColor: '#fcb602', borderRadius: 50, }, }); export default ScanQRCode;
使用到了react-native-camera组件,具体安装细节就不赘述了,遇到问题可以留言评论。
安装方法请参照官网:
https://react-native-camera.github.io/react-native-camera/docs/installation
安装步骤:
npm install react-native-camera --save
Android - other required stepsAdd permissions to your app android/app/src/main/AndroidManifest.xml file:
Insert the following lines in android/app/build.gradle:
android { ... defaultConfig { ... missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line } }
素材如下(中间是透明的):
参考:
https://blog.csdn.net/qq_38356174/article/details/95360470
如果看我文章还有疑问可以去看下,我的视频实录。
https://www.bilibili.com/video/BV1ST4y1L7VD/