React Native + react-native-camera 实现扫描二维码「安卓」

注：本篇博客参考了此篇：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')
...

如图：注意插入的位置

 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 (
        <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限定区域扫描 - 简书

2，ios端的适配

搜索到的博客：https://segmentfault.com/a/1190000014955481

ok；先写到这里。如果这篇博客对你有帮助，欢迎评论，交流问题。我也在一边踩坑一边coding。