在rn中想要调起二维码扫码功能,需要用到 react-native-smart-barcode 控件,总结如下
一、安装
npm install react-native-smart-barcode --save
npm install react-native-smart-timer-enhance --save
二、安卓端集成
1.在android/settings.gradle文件中新增以下代码:
include ':react-native-smart-barcode'
project(':react-native-smart-barcode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-barcode/android')
2.在android/app/build.gradle文件中:
dependencies { ... // 在这里添加 compile project(':react-native-smart-barcode') }
3.在MainApplication.java文件中(这里官方上面有错误,在这里修改一下):
... //将原来的代码注释掉,换成这句 private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { // private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), //直接在这里添加 new RCTCapturePackage() ); } }; //添加,好像也可以不添加 public void setReactNativeHost(ReactNativeHost reactNativeHost) { mReactNativeHost = reactNativeHost; } @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } ...
4.在AndroidManifest.xml文件中添加相机权限:
... <uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.VIBRATE"/> <uses-feature android:name="android.hardware.camera"/> <uses-feature android:name="android.hardware.camera.autofocus"/> ...
IOS端集成:
1.将\node_modules\react-native-smart-barcode\ios\RCTBarcode\RCTBarCode.xcodeproj 添加到Xcode项目中,如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/4a388396eb926cd641a8267b8575cb37.png)
2.添加依赖,Build Phases->Link Binary With Libraries 加入RCTBarCode.xcodeproj\Products\libRCTBarCode.a(直接拖),如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/c6bd9481116f01034908de7540478fbc.png)
3.确定一下Build Settings->Seach Paths->Header Search Paths是否有$(SRCROOT)/../../../react-native/React并设为recursive
![](https://i-blog.csdnimg.cn/blog_migrate/e362434b9a4e4028ff50541c39a76447.png)
4.将\node_modules\react-native-smart-barcode\ios\raw 文件夹拖到到Xcode项目中(确保文件夹是蓝色的),如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/7af11fac3f5e33ddccb808dd9188b32f.png)
5.在info.plist添加相机权限 Privacy - Camera Usage Description:
如何使用(这里贴一下作者的代码):
import React, { Component, } from 'react' import { View, StyleSheet, Alert, } from 'react-native' import Barcode from 'react-native-smart-barcode' import TimerEnhance from 'react-native-smart-timer-enhance' class BarcodeTest extends Component { // 构造 constructor(props) { super(props); // 初始状态 this.state = { viewAppear: false, }; } render() { return ( <View style={{flex: 1, backgroundColor: 'black',}}> {this.state.viewAppear ? <Barcode style={{flex: 1, }} ref={ component => this._barCode = component } onBarCodeRead={this._onBarCodeRead}/> : null} </View> ) } componentDidMount() { let viewAppearCallBack = (event) => { this.setTimeout( () => { this.setState({ viewAppear: true, }) }, 255) } this._listeners = [ this.props.navigator.navigationContext.addListener('didfocus', viewAppearCallBack) ] } componentWillUnmount () { this._listeners && this._listeners.forEach(listener => listener.remove()); } _onBarCodeRead = (e) => { console.log(`e.nativeEvent.data.type = ${e.nativeEvent.data.type}, e.nativeEvent.data.code = ${e.nativeEvent.data.code}`) this._stopScan() Alert.alert(e.nativeEvent.data.type, e.nativeEvent.data.code, [ {text: 'OK', onPress: () => this._startScan()}, ]) } _startScan = (e) => { this._barCode.startScan() } _stopScan = (e) => { this._barCode.stopScan() } } export default TimerEnhance(BarcodeTest)
原文地址:https://www.jianshu.com/p/8bef243bc35d