【react-native】扫码功能踩坑与实践记录

环境

react-native :^0.72

前言

因为业务需要，需要添加扫码功能，之前没弄过，于是大刀阔斧上去干了，结果遇到很多坑，记录一下！

第一次踩坑

完成扫码第一步肯定是调用相机，随便搜了一下，就能发现比较常用的是社区的一个库

react-native-camera

于是我找到了这个库，阅读文档发现这么一句话

已被废弃，作者不再支持

于是转到作者支持的

react-native-vision-camera

安装对应的

vision-camera-code-scanner

结果各种版本冲突的坑，最后放弃，卒

正确的开始

是时候换回旧版本的库了，老家伙还是很有用嘛😍

使用

react-native-camera

react-native-qrcode-scanner-view

点击链接，按照文档说明安装，使用。无大问题

小坑

使用时报错 AppState.removeEventListener is not function 这是因为在react-native 的新版本，AppState已经没有removeEventListener方法了，所以报错。知道报错原因就很好解决了

使用patch-package 打个补丁

diff --git a/node_modules/react-native-qrcode-scanner-view/QRScanner.js b/node_modules/react-native-qrcode-scanner-view/QRScanner.js
index 3439244..9e7b947 100644
--- a/node_modules/react-native-qrcode-scanner-view/QRScanner.js
+++ b/node_modules/react-native-qrcode-scanner-view/QRScanner.js
@@ -293,7 +293,7 @@ export default class QRScannerView extends Component {
   }
   
   componentWillUnmount(){
-    AppState.removeEventListener('change', this.handleAppStateChange);
+    // AppState.removeEventListener('change', this.handleAppStateChange);
     this.rnCamera && this.rnCamera.pausePreview();
   }

注释掉错误的代码 就可以正常运行了

获取权限

获取相机权限自然是用

react-native-permissions

按照说明安装使用，有概率因为缓存问题遇坑。这里在提供一个获取相机检查权限的通用方法吧

/**
 * 检查相机权限
 * @date 2023/7/14 - 10:22:24
 *
 * @async
 * @returns {Promise<boolean>} true: 通过 false: 失败
 */
export const checkCameraPermission = async () => {
  if (Platform.OS === 'ios') {
    return check(PERMISSIONS.IOS.CAMERA).then((res) => {
      switch (res) {
        case 'denied':
          return request(PERMISSIONS.IOS.CAMERA).then((result) => {
            if (result === 'granted') {
              return true;
            } else {
              return false;
            }
          });

        case 'granted':
          return true;
        case 'blocked':
          showMessage({ message: '相机权限未获得', position: 'center' });
          return false;

        default:
          showMessage({ message: '相机权限未获得', position: 'center' });
          return false;
      }
    });
  }
  if (Platform.OS === 'android') {
    return request(PERMISSIONS.ANDROID.CAMERA, {
      title: '相机访问权限',
      message: '我们需要访问您的相机以扫描二维码。',
      buttonPositive: '确定',
      buttonNegative: '取消',
    }).then((res) => {
      return res === PermissionsAndroid.RESULTS.GRANTED ? true : false;
    });
  }
};

觉得这篇文章对你有用，请给一个👍吧，非常感谢