在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项目中，如下图：
2.添加依赖，Build Phases->Link Binary With Libraries 加入RCTBarCode.xcodeproj\Products\libRCTBarCode.a（直接拖）,如下图：
3.确定一下Build Settings->Seach Paths->Header Search Paths是否有$(SRCROOT)/../../../react-native/React并设为recursive
4.将\node_modules\react-native-smart-barcode\ios\raw 文件夹拖到到Xcode项目中（确保文件夹是蓝色的），如下图：
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
查看更多关于【react】的文章
