我看了好多人的react-native-smart-barcode多多少少有些問題，踩了好多坑搞定了。
npm install react-native-smart-barcode --save
android端集成：
- 在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')
}
- 在MainApplication.java文件中（官方上面的問題錯(cuò)誤，修改如下）：
...
import com.reactnativecomponent.barcode.RCTCapturePackage; //這是要添加的
//將原來的代碼注釋掉，換成這句
private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
// private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...........
@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文件中添加相機(jī)權(quán)限:
...
<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的Libraries中
2.在Build Phases->Link Binary With Libraries 加入RCTBarCode.xcodeproj\Products\libRCTBarCode.a
3.查看Build Settings->Seach Paths->Header Search Paths是否有$(SRCROOT)/../../../react-native/React并設(shè)為recursive
4.將\node_modules\react-native-smart-barcode\ios\raw 文件夾拖到到Xcode項(xiàng)目中（確保文件夾是藍(lán)色的）
image.png
5.在info.plist添加相機(jī)權(quán)限 Privacy - Camera Usage Description：
image
看了好多代碼有問題，這是我的代碼（親測(cè)有效）:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Alert
} from 'react-native';
import Barcode from 'react-native-smart-barcode'
type Props = {};
export default class App extends Component<Props> {
//構(gòu)造方法
constructor(props) {
super(props);
this.state = {
viewAppear: false,
};
}
componentDidMount() {
//啟動(dòng)定時(shí)器
this.timer = setTimeout(
() => this.setState({viewAppear: true}),
250
);
}
//組件銷毀生命周期
componentWillUnmount() {
//清楚定時(shí)器
this.timer && clearTimeout(this.timer);
}
_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.code, [
{text: '確認(rèn)', onPress: () => this._startScan()},
])
};
_startScan = (e) => {
this._barCode.startScan()
};
_stopScan = (e) => {
this._barCode.stopScan()
}
render() {
return (
<View style={{flex: 1}}>
{this.state.viewAppear ?
<Barcode style={{flex: 1,}} ref={component => this._barCode = component}
onBarCodeRead={this._onBarCodeRead}/>
: null
}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
屬性
| Prop | 類型 | 可選的 | 默認(rèn) | 描述 |
|---|---|---|---|---|
| barCodeTypes | array | Yes | 支持的條碼類型 | |
| scannerRectWidth | number | Yes | 255 | 掃描區(qū)域的寬度 |
| scannerRectHeight | number | Yes | 255 | 掃描區(qū)域的高度 |
| scannerRectTop | number | Yes | 0 | 掃描區(qū)域下移 |
| scannerRectLeft | number | Yes | 0 | 掃描區(qū)域左移 |
| scannerLineInterval | number | Yes | 3000 | 掃描線移動(dòng)的頻率 |
| scannerRectCornerColor | string | Yes | #09BB0D | 邊線的顏色 |
效果圖
image.png
配置時(shí)出現(xiàn)的bug，給大家梳理下
image.png
image.png
這個(gè)很常見其實(shí)，解決辦法
npm install prop-types --save
然后修改一下文件
image.png
3.
No resource found that matches the given name: attr 'android:keyboardNavigationCluster'修改成如下參數(shù)：
image.png
親測(cè)沒有問題，覺得有用的小伙伴點(diǎn)個(gè)小紅心就行??，么么噠。
