2020年08月 用React Native 实现二维码扫描，实操记录。不说废话，干货版。
详细版见：https://blog.csdn.net/lxyoucan/article/details/108318826
新建RN项目npx react-native init qrcodeScanner换国内清华大学的提高速度（非必须）
source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'npm install react-native-camera --saveandroid/app/build.gradle
missingDimensionStrategy 'react-native-camera', 'general'android { ... defaultConfig { ... missingDimensionStrategy 'react-native-camera', 'general' // {
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} /*相机闪光模式*/
captureAudio={false}
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;
运行效果
如果看我文章还有疑问可以去看下，我的视频实录。
https://www.bilibili.com/video/BV1ST4y1L7VD/
