react-native 二維碼掃描
先看效果
使用的開源庫
react-native-smart-barcode react-native-smart-timer-enhance
安裝
npm install react-native-smart-barcode --save
npm install react-native-smart-timer-enhance --save
複製程式碼
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:
react-native 程式碼
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() {
this.setState({
viewAppear: true,
})
// 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)
複製程式碼
附原文
android 配置
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"/>
複製程式碼
可能會遇到的問題
這是因為react-Native 0.48後被移除了 PropTypes 所以在專案上重新匯入PropTypes 匯入方式是 import PropTypes from 'prop-types'; 圖示如下參考
作者:你的男孩_阿強 連結:http://cdn2.jianshu.io/p/8bef243bc35d
原始碼地址
連結 https://github.com/yxwandroid/rnMydemo