A smart barcode scanner component for React Native app. The library uses https://github.com/zxing/zxing to decode the barcodes for android, and also supports ios.
npm install react-native-smart-barcode --save
It can only be used greater-than-equal react-native 0.4.0 for ios, if you want to use the package less-than react-native 0.4.0, use npm install react-native-smart-barcode@untilRN0.40 --save
Drag RCTBarCode.xcodeproj to your project on Xcode.
Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTBarCode.a from the Products folder inside the RCTBarCode.xcodeproj.
Look for Header Search Paths and make sure it contains $(SRCROOT)/../../../react-native/React as recursive.
Dray raw folder to your project
Add
Privacy - Camera Usage Descriptionproperty in your info.plist(for ios 10)
- In
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')
- In
android/app/build.gradle
...
dependencies {
...
// From node_modules
compile project(':react-native-smart-barcode')
}
- In 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()
);
}
};
public void setReactNativeHost(ReactNativeHost reactNativeHost) {
mReactNativeHost = reactNativeHost;
}
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
...
- In MainActivity.java
...
import com.reactnativecomponent.barcode.RCTCapturePackage; //import RCTCapturePackage
...
@Override
protected void onCreate(Bundle savedInstanceState) {
MainApplication application = (MainApplication) this.getApplication();
application.setReactNativeHost(new ReactNativeHost(application) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RCTCapturePackage(MainActivity.this) //register Module
);
}
});
super.onCreate(savedInstanceState);
}
- In AndroidManifest.xml, add camera permissions
...
<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"/>
...
Install the package from npm with npm install react-native-smart-barcode --save.
Then, require it from your app's JavaScript files with import Barcode from 'react-native-smart-barcode'.
importReact,{Component,}from'react'import{View,StyleSheet,Alert,}from'react-native'importBarcodefrom'react-native-smart-barcode'importTimerEnhancefrom'react-native-smart-timer-enhance'classBarcodeTestextendsComponent{// 构造constructor(props){super(props);// 初始状态this.state={viewAppear: false,};}render(){return(<Viewstyle={{flex: 1,backgroundColor: 'black',}}>{this.state.viewAppear ? <Barcodestyle={{flex: 1,}}ref={component=>this._barCode=component}onBarCodeRead={this._onBarCodeRead}/> : null}</View>)}componentDidMount(){letviewAppearCallBack=(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()}}exportdefaultTimerEnhance(BarcodeTest)| Prop | Type | Optional | Default | Description |
|---|---|---|---|---|
| barCodeTypes | array | Yes | determines the supported barcodeTypes | |
| scannerRectWidth | number | Yes | 255 | determines the width of scannerRect |
| scannerRectHeight | number | Yes | 255 | determines the height of scannerRect |
| scannerRectTop | number | Yes | 0 | determines the top shift of scannerRect |
| scannerRectLeft | number | Yes | 0 | determines the left shift of scannerRect |
| scannerLineInterval | number | Yes | 3000 | determines the interval of scannerLine's movement |
| scannerRectCornerColor | string | Yes | #09BB0D | determines the color of scannerRectCorner |