react native 实现扫描条形码功能（react-native-camera）
2024-04-20 18:07:51
目录：
- 思路
- 安装中间件
- 确认
iOS、Android配置信息 - 封装扫码组件
- 另一个组件获取扫码数据
思路
- 安装中间件
react-native-camera； - 检查
iOS、Android是否配置成功； - 封装扫码组件，实现页面布局、扫码动画、获取扫描信息等；
- 另一个组件添加扫码入口，获取扫码数据；
具体步骤
1. 安装中间件 react-native-camera，参考官网
版本："react": "16.8.3",
"react-native": "0.59.9",
"react-native-camera": "2.10.2"安装方式：npm install react-native-camera --save
react-native link react-native-camera2.可能 link 失败，检查 iOS 、Android 是否配置成功
iOS环境：
- 【检查】是否存在 `RNCamera.xcodeproj`用 XCode 打开 iOS 项目/Libraries/RNCamera.xcodeproj；
若不存在：右键Libraries->add Files to xxx项目名
-> 选择RN项目中node_modules -> react-native-camera -> 确定- 【检查】是否有相机使用权限在 `info.plist` 中添加相机使用权限 key:
"Privacy - Camera Usage Description"，value: "需要您的同意才能使用相机"Android环境：
- 【检查】`android/app/src/main/java/com/xxx/MainApplication.java`+ import org.reactnative.camera.RNCameraPackage;protected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage(),+ new RNCameraPackage());}- 【检查】android/settings.gradle+ include ':react-native-camera'+ project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')- 【检查】android/app/build.gradleandroid {...defaultConfig {...+ missingDimensionStrategy 'react-native-camera', 'general' }}...dependencies {+ implementation project(':react-native-camera')implementation fileTree(dir: "libs", include: ["*.jar"])implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"implementation "com.facebook.react:react-native:+" // From node_modules}- 【检查】android/build.gradleallprojects {repositories {...maven { url "https://jitpack.io" }maven { url "https://maven.google.com" }}}- 【检查】android/app/src/main/AndroidManifest.xml 是否有相机使用相关权限<uses-permission android:name="android.permission.RECORD_AUDIO"/><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />- 配置文件 android/build.gradle 版本信息如下// Top-level build file where you can add configuration options common to all sub-projects/modules.buildscript {ext {buildToolsVersion = "28.0.3"minSdkVersion = 16compileSdkVersion = 28targetSdkVersion = 28supportLibVersion = "28.0.0"}repositories {google()jcenter()maven {url 'https://maven.google.com/'name 'Google'}}dependencies {classpath("com.android.tools.build:gradle:3.4.0")// NOTE: Do not place your application dependencies here; they belong// in the individual module build.gradle files}}allprojects {repositories {mavenLocal()google()jcenter()maven {// All of React Native (JS, Obj-C sources, Android binaries) is installed from npmurl "$rootDir/../node_modules/react-native/android"}maven { url "https://jitpack.io" }maven { url "https://maven.google.com" }}}- 以上配置完毕，如果有报错，可以选择关闭开发工具，重新打开，本人就是一样的操作，昨天出现各种错误，今天从头再一样到配置，就可以了，嗨，生活
3、封装扫码组件，实现页面布局、扫码动画、获取扫描信息
【封装】扫码组件 BarCodePage；
注意：扫码成功后跳转到 TestPage 页面；import React, { Component } from 'react';
import {View,StyleSheet,Text,Animated,Easing,InteractionManager,TouchableOpacity,Image,SafeAreaView,Dimensions
} from 'react-native';
import { RNCamera } from 'react-native-camera';const { width, height } = Dimensions.get('window');const Height = () => {return height
};const Width = () => {return width
};class BarCodePage extends Component {constructor(props) {super(props);this.state = { transCode:'', // 条码typeCode: '', // 条码类型showCode: true,animateCode: new Animated.Value((Width() - 200) / 2,(Height() - 340) / 2), // 二维坐标}}componentDidMount() {InteractionManager.runAfterInteractions(() => {this.startAnimation()})console.log('进入-------', this.state.showCode)}// 动画开始startAnimation() {this.state.animateCode.setValue(0)Animated.timing(this.state.animateCode, {toValue: 1, // 运动终止位置，比值duration: 2500, // 动画时长easing: Easing.linear, // 线性的渐变函数delay: 0.3, // 在一段时间之后开始动画（单位是毫秒），默认为0}).start(() => this.startAnimation())}barcodeReceived(e) {let that = thisif(this.state.showCode){console.log(e);that.setState({transCode: e.data,typeCode: e.type,showCode: false})if(e.data) {let barCodeData = {typeName: 'testScan', // TestPage获取此值typeValue: e.data}that.props.navigation.navigate('TestPage', { barCodeData })}}}// 关闭扫一扫closeScanPage() {this.props.navigation.navigate('TestPage')}render() { return ( <View style={styles.container}><SafeAreaView style={styles.container}><RNCameraonBarCodeRead={this.barcodeReceived.bind(this)}onCameraReady={() => {console.log('ready')}}permissionDialogTitle={'提示信息'}permissionDialogMessage={'APP需要使用相机，请打开相机权限允许APP使用'}style={styles.scan_camera}><View style={styles.scan_cont_box}><View style={styles.scan_cont_circle}><Animated.View style={{alignItems: 'center',transform: [{// translateX: x轴移动// translateY: y轴移动translateY: this.state.animateCode.interpolate({inputRange: [0,1],outputRange: [0,200]})}]}}><Text style={styles.scan_circle_init}></Text></Animated.View></View></View><TouchableOpacityactiveOpacity={.8}style={styles.scan_top_box}onPress={() => this.closeScanPage()}><Image source={require('关闭图标，不需要可删除.png')}/></TouchableOpacity><View style={styles.scan_info_box}><Text style={styles.scan_info}>将条形码放入框内，即可自动扫描</Text></View></RNCamera></SafeAreaView></View>)}
}const styles = StyleSheet.create({container: {flex: 1},scan_top_box: {position: "absolute",left: 20,top: 20,width: 24,height: 24},scan_camera: {flex: 1,height: Height()},scan_cont_box: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'rgba(0,0,0,0.3)',},scan_cont_circle: {width: 260,height: 260,borderWidth: 1,borderColor: '#919191',backgroundColor: 'rgba(255,255,255,0.1)'},scan_circle_init: {width:250,height:1,backgroundColor:'#00ff00'},scan_info_box: {height: 100,backgroundColor: 'rgba(0,0,0,0.3)',alignItems: 'center',width: Width()},scan_info: {color: '#fff'},info: {width: Width(),height: 80,backgroundColor: '#fff',paddingLeft: 10,paddingBottom:5,justifyContent: 'space-around',},
})export default BarCodePage;4、TestPage 页面增加入口，以及获取扫描的信息，结束✌️
`TestPage`主要代码如下：constructor(props) {super(props);this.state = {inputValue: ''}
}componentWillReceiveProps(nextProps) {// 监听扫码页面获取的值let { barCodeData } = nextProps.navigation.state.paramslet that = thisif(barCodeData && barCodeData.typeValue && barCodeData.typeName == 'testScan') {that.setState({inputValue: barCodeData.typeValue})}
}handleScanCheck() {this.props.navigation.navigate('BarCodePage')
}render() {let { inputValue } = this.statereturn(<Text>展示条形码数据：</Text><TextInput defaultValue={inputValue} /><TouchableOpacityactiveOpacity={.8}onPress={() => this.handleScanCheck()}><Image source={require('扫一扫图标，点击进入扫码页面.png')} /></TouchableOpacity>)
}写给自己的随笔，有问题欢迎指出
react native 实现扫描条形码功能（react-native-camera）相关推荐
- react加水印_多功能React影像组件(拖拽、水印、缩放、切换、旋转)
cxj-react-image 用法如下: yarn add cxj-react-image // npm i cxj-react-image import ImageModal from 'cxj- ...
- React Native 轻松集成分享功能（Android 篇）
关于推送的集成请参考这篇文章,关于统计的集成请参考这篇文章,本篇文章将引导你集成分享功能. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台如下: ...
- react native loading动画_TypeScript for React (Native) 进阶
I. 为何要用TypeScript 我们公司在德国还有个团队. 我们这次要接他们的一个库. 其中的一个API要求我们传入参数, 这个API是这样定义的: /** * @param {Object} i ...
- 视频教程-react电影院在线选座功能-ReactJS
react电影院在线选座功能 北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥29.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 AP ...
- react引入多个图片_重新引入React：v16之后的每个React更新都已揭开神秘面纱。
react引入多个图片 In this article (and accompanying book), unlike any you may have come across before, I w ...
- react前端开发_是的，React正在接管前端开发。 问题是为什么。
react前端开发 by Samer Buna 通过Samer Buna 是的,React正在接管前端开发. 问题是为什么. (Yes, React is taking over front-end ...
- react leaflet_如何使用Leaflet在React中轻松构建地图应用
react leaflet Mapping is hard, but spinning up a new app that renders maps doesn't have to be. Here' ...
- H5调摄像头并扫描条形码初探
最近公司有个业务,是要在pad版调取摄像头并扫描条形码.一开始觉得这个功能无从下手,光是调取一个摄像头就应该挺费事的,更何况还要扫描条形码. 但是诸如微信这些流行的APP也都内嵌了这种功能,可惜大厂们 ...
- 【React】React全家桶（五）React Hooks
文章目录 1 Hooks简介 1.1 什么是Hooks? 1.2 Hooks的优势 1.3 Hooks使用场景 1.4 Hooks使用注意事项 2 Hooks API 2.1 数据驱动更新型Hooks ...
最新文章
- 百万奖金！交通事件、医学病理、广告检测，江苏大数据开发与应用大赛报名...
- define宏定义和const定义之间的区别
- 我在美国与“狼”共舞的日子（7）
- LeetCode——树：递归
- 你......真的了解我吗？
- Junit5集成到SpringBoot工程
- 最新的jQuery插件和JavaScript库
- linux建sybase设备,linux sybase 安装全过程(写给初学者)
- [2018.10.24 T3] 老大
- 数字信号处理实验（六）—— 心电信号处理 IIR FIR滤波综合题（下篇）
- 【OR】YALMIP 行列式最大化
- mysql代码创建表博客园_数据库——用代码创建表
- hdu 5857 Median ★
- 哈佛为什么群星闪耀？
- Easy EDA #学习笔记04# |Type-C Micro USB APPLELighting 充电头
- R语言因子型数值转数值型
- Ardupilot环境搭建
- Springboot+Mybatis-plus实现增删改查功能超详细
- 记录oracle的一些操作
- 搭建自己的离线下载系统