注：本篇博客参考了此篇：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 添加如下：

如图：

3，路径：app/build.gradle中添加两处代码：

...

missingDimensionStrategy 'react-native-camera', 'general'

...

implementation project(path: ':react-native-camera')

...

如图：注意插入的位置

 4.路径 android/settings.gradle

添加以下代码

include ':react-native-camera'

project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')

如图：

 OK，环境配置到此为止。

问：为什么有的博客上需要在 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 (

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}

>

width: 500,

height: 220,

backgroundColor: 'rgba(0,0,0,0.5)',

}} />

{/* 这里暂时不加扫描动画-后续自行编辑-也可参考链接的博客*/}

{/*

styles.border,

{ transform: [{ translateY: this.state.moveAnim }] }]} /> */}

将二维码放入框内，即可自动扫描