注：本篇博客参考了此篇：React Native实现扫描二维码功能基于react-native-camera
感谢 孙先森i的分享；也感谢引用的其他博客的作者；我也来加块砖；
这篇博客用于自我记录和为初学者提供帮助；欢迎大神指点。
电脑：Mac；
安卓手机：小米6
环境：react-native 0.66.x
库：react-native-camera
1，安装第三方依赖库
npm install react-native-camera --save
npm link react-native-camera 【保险起见，手动link一下】link 如果报错大概率是权限问题，执行sudo npm link react-native-camera；再按照提示输入密码
windows端 大概是 npm link react-native-camera --force
2，清单文件添加权限
路径：android/app/src/main/AndroidManifest.xml
添加如下：
<uses-permission android:name="android.permission.CAMERA" />如图：
3，路径：app/build.gradle中添加两处代码：
...
missingDimensionStrategy 'react-native-camera', 'general'
...
implementation project(path: ':react-native-camera')
...如图：注意插入的位置
android/settings.gradle
添加以下代码
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')如图：
环境配置到此为止。
问：为什么有的博客上需要在 android/app/src/main/java/com/rn_demo1/MainApplication.java 这个主入口类中，添加new RNCameraPackage()呢？
答：因为大部分搜到的博客是几年前的，用的react native 版本 < 0.6；0.6 版本以后会自动link。原文件中也有说明；仔细看下图红框中的部分有说明。
好了，到这一步。你可以 yarn android 执行一遍了。
如果编译通过，手机上显示个大红屏，显示 server 500 什么的。不管它再次 yarn android，总会成功的。
如果编译不通过，删除node_modules文件夹。重新 npm i ; 安装所有依赖库，再执行 npm link；如果有报错就 sudo npm link 【步骤如开篇所述】
业务功能代码：可直接新建一个 ScanQRCode.js
import { RNCamera } from 'react-native-camera'
import React, { useCallback, useState } from 'react';
import {
StyleSheet,
Animated,
View,
Text,
Button
} from 'react-native';
/**
* hook 写法
*/
export default function ScanQRCode() {
const [flash, setFlash] = useState(false)
const onBarCodeRead = useCallback((result) => {
const { data } = result;
//扫码后的操作 /// 这里会多次触发
console.log(data)
}, [])
return (
<View style={styles.container}>
<RNCamera
captureAudio={false}
autoFocus={RNCamera.Constants.AutoFocus.on}/*自动对焦*/
style={[styles.preview]}
type={RNCamera.Constants.Type.back}/*切换前后摄像头 front前back后*/
flashMode={flash ? RNCamera.Constants.FlashMode.torch : RNCamera.Constants.FlashMode.off}/*相机闪光模式*/
onBarCodeRead={onBarCodeRead}
>
<View style={{
width: 500,
height: 220,
backgroundColor: 'rgba(0,0,0,0.5)',
}} />
<View style={[{ flexDirection: 'row' }]}>
<View style={{ backgroundColor: 'rgba(0,0,0,0.5)', height: 200, width: 200 }} />
<View style={{ width: 200, height: 200 }}>
{/* 这里暂时不加扫描动画-后续自行编辑-也可参考链接的博客*/}
{/* <Animated.View style={[
styles.border,
{ transform: [{ translateY: this.state.moveAnim }] }]} /> */}
</View>
<View style={{ backgroundColor: 'rgba(0,0,0,0.5)', height: 200, width: 200 }} />
</View>
<View style={{ flex: 1, backgroundColor: 'rgba(255, 0, 0, 0.5)', width: 500, alignItems: 'center' }}>
<Text style={styles.rectangleText}>将二维码放入框内，即可自动扫描</Text>
<Button onPress={() => {
setFlash(!flash)
}} title={(flash ? '关闭' : '打开') + '闪光灯'} />
</View>
</RNCamera>
</View>
)
}
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
}
});
关于安卓动态权限获取的事；Android 6.0动态权限申请 - 简书
现在已经是 2202 年了，没有谁的安卓手机系统低于android6.0了，所有直接上代码；
<Button title='测试按钮' onPress={async () => {
///手机好像都会自带询问弹窗；下面注释的部分不用写。
///如果你之前已经允许过了，后续就不会再次调出手机自带的询问弹窗。
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
// {
// title: '摄像头权限',
// message: '应用想获取你的摄像头权限',
// buttonNegative: '拒绝',
// buttonPositive: '允许',
// },
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('你现在已经有了摄像头的权限');
///路由跳转到ScanQRCode的页面
..........
} else {
console.log('拒绝');
return
}
}} />效果如下：【模拟器】和手机一致
目前为止：基本功能跑通。可以小小开心一下；后续还有事情等待着我们去还做，如：
1，如何让它只在正方形区域才扫描
搜索到的博客：基于react-native-camera限定区域扫描 - 简书
ok；先写到这里。如果这篇博客对你有帮助，欢迎评论，交流问题。我也在一边踩坑一边coding。
