React Native + react-native-camera 实现扫描二维码「安卓」_react-native-camera qr-程序员宅基地

技术标签: react.js  react native  javascript  

注:本篇博客参考了此篇: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。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lkjhgf50/article/details/122972492

智能推荐

jQuery.fn.extend()方法_jquery fn.extend-程序员宅基地

文章浏览阅读176次。jQuery.fn.extend()方法 实例添加两个方法到jQuery原型($.fn)&lt;label&gt;&lt;input type="checkbox" name="foo"&gt; Foo&lt;/label&gt; &lt;label&gt;&lt;input type="checkbox" name="bar"&gt_jquery fn.extend

1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案微信小程序篇(域名备案)_stm32域名访问-程序员宅基地

文章浏览阅读320次。如果自己的域名有没备案使用域名访问http的时候会报错微信小程序如果要发布,也需要有备案过的云服务器和域名我的不能详细写了,因为已经备案过了,展示的信息不一样了,我拷贝过来别人写的 <ignore_js_op> 再往下,就根据提示让你填,你就填就..._stm32域名访问

如何做到iphone数据恢复_iphone格式化后数据还能恢复吗-程序员宅基地

文章浏览阅读3.4k次。近期小编我收到不少用户咨询误删除了苹果手机数据之后,应该如何恢复到问题。要知道,苹果手机最经典的就是他的ios系统,这套系统比较闭合,什么都是自成体系。所以有时候也让很多朋友担心,万一iphone数据丢失了,itun1youmeilaide及备份,该怎么办才好呢?安卓手机能用的数据恢复办法,苹果也能用么?一般来说,选择专业数据恢复技术苹果iphone手机数据恢复软件:http://ww_iphone格式化后数据还能恢复吗

反射如何打破封装性_打破产品建议的复杂性-程序员宅基地

文章浏览阅读83次。反射如何打破封装性当前系统的真正问题(The Real Issue With the Current Sytems)With the rise of e-commerce in this era, a new frontier has opened up. It’s called product recommendations. It’s a no brainers, you recommend..._封装 复杂

NLP 文本预处理 Python 代码_python文本预处理代码csdn-程序员宅基地

文章浏览阅读1.3k次,点赞2次,收藏11次。在获得文本之后 将所有字母转换为小写或大写 目录在获得文本之后将所有字母转换为小写或大写将数字转换为单词或删除数字删除标点、重音符号和其他音调符号删除空格扩展缩写词删除停止词、稀疏词和特定词文本规范化---单词减为词干、词根或词干的过程词性标记分块是一种自然的语言过程,用于识别组成部分把句子(名词、动词、形容词等)联系起来具有离散语法意义的顺..._python文本预处理代码csdn

com.sun.mail.smtp.SMTPSendFailedException: 553 Mail from must equal authorized user_com.sun.mail.smtp.smtpsenderfailedexception: 553 m-程序员宅基地

文章浏览阅读8.6k次。com.sun.mail.smtp.SMTPSendFailedException: 553 Mail from must equal authorized user1.问题SMTP邮件发送失败异常 :553,邮件发信方必须与已认证用户相同错误来自于:使用org.springframework.mail.SimpleMailMessage发送邮件时,没有setFrom时抛出的异..._com.sun.mail.smtp.smtpsenderfailedexception: 553 mail from must equal author

随便推点

全球15个最顶级的技术类博客站点_世界顶级计算机技术网站-程序员宅基地

文章浏览阅读1.4k次。中文原文:http://publish.it168.com/2007/0525/20070525022301.shtml看自:http://www.williamlong.info/archives/919.html英文原文:http://www.computerworld.com/action/article.do?command=printArticleBasic&articleId=_世界顶级计算机技术网站

银河麒麟V10操作系统安装putty和cutecom和网络调试助手(mNetAssist)_putty软件怎么用麒麟-程序员宅基地

文章浏览阅读5.3k次。银河麒麟V10操作系统安装putty和cutecom和网络调试助手(mNetAssist)安装Puttysudo apt-get install putty安装Cutecomsudo apt-get install cutecom安装网络调试助手需要先下载安装包mNetAssist-release-amd64.debsudo dpkg -i mNetAssist-release-amd64.deb..._putty软件怎么用麒麟

电子协会 C语言 1级 1 、 计算(a+b)/c 的值_c语言(a+b)/c-程序员宅基地

文章浏览阅读243次。给定 3 个整数 a、b、c,计算表达式(a+b)/c 的值,/是整除运算。(-10,000 < a,b,c< 10,000, c 不等于 0)输入仅一行,包括三个整数 a、b、c, 数与数之间以一个空格分开。输出一行,即表达式的值。_c语言(a+b)/c

图像视频滤镜算法---颜色滤镜_图像滤镜算法-程序员宅基地

文章浏览阅读8.9k次,点赞8次,收藏39次。 承接上一篇滤镜初识,本文将介绍第一种滤镜:颜色滤镜。颜色滤镜颜色滤镜即调色滤镜,也是最常见的滤镜,任何通过调节图像像素值的亮度、对比度、饱和度、色相等等方法,得到的不同于原图像颜色的效果,都统称为颜色滤镜。我们来做一个颜色增强滤镜,以此说明,方便大家更好的理解。如下图所示,我们对一副图在PS中进行饱和度调整(饱和度提高41):那么,我们在这个过程中,算法实际上做了..._图像滤镜算法

Android Lottie使用集成_android集成copylotit-程序员宅基地

文章浏览阅读2k次。Lottie是什么 Lottie是Airbnb 开源的一个项目,我在知道了这个项目后感觉真的遇见了新大陆一样 想必android开发的程序猿们都或多或少的为动画的实现苦恼过,或者都曾认为,动画这个实现在android的代码里总感觉会消耗系统的性能,那么今天说的这个Lottie,就解决了所有的烦恼,一起来看实现方法吧!走起来!!!!!首先说一下,动画效果是由UI 或者设计通过AE来_android集成copylotit

sql语句优化之一:尽量使用索引避免全表扫描_尽量避免在 where 子句中使用 != 或者 <> 操作符,查询引用会放弃索引而进行全表扫-程序员宅基地

文章浏览阅读1.1w次,点赞4次,收藏22次。1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,如: select id from t where num is null 可以在num上设置默认值0,确保表中num列没有null值,然后这样查询: selec_尽量避免在 where 子句中使用 != 或者 <> 操作符,查询引用会放弃索引而进行全表扫