我看了好多人的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文件中（官方上面的问题错误，修改如下）：
...
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文件中添加相机权限:
...
<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并设为recursive
4.将\node_modules\react-native-smart-barcode\ios\raw 文件夹拖到到Xcode项目中（确保文件夹是蓝色的）
image.png
5.在info.plist添加相机权限 Privacy - Camera Usage Description：
image
看了好多代码有问题，这是我的代码（亲测有效）:
/**
* 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> {
//构造方法
constructor(props) {
super(props);
this.state = {
viewAppear: false,
};
}
componentDidMount() {
//启动定时器
this.timer = setTimeout(
() => this.setState({viewAppear: true}),
250
);
}
//组件销毁生命周期
componentWillUnmount() {
//清楚定时器
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: '确认', 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 | 类型 | 可选的 | 默认 | 描述 |
|---|---|---|---|---|
| barCodeTypes | array | Yes | 支持的条码类型 | |
| scannerRectWidth | number | Yes | 255 | 扫描区域的宽度 |
| scannerRectHeight | number | Yes | 255 | 扫描区域的高度 |
| scannerRectTop | number | Yes | 0 | 扫描区域下移 |
| scannerRectLeft | number | Yes | 0 | 扫描区域左移 |
| scannerLineInterval | number | Yes | 3000 | 扫描线移动的频率 |
| scannerRectCornerColor | string | Yes | #09BB0D | 边线的颜色 |
效果图
image.png
配置时出现的bug，给大家梳理下
image.png
image.png
这个很常见其实，解决办法
npm install prop-types --save
然后修改一下文件
image.png
3.
No resource found that matches the given name: attr 'android:keyboardNavigationCluster'修改成如下参数：
image.png
亲测没有问题，觉得有用的小伙伴点个小红心就行😄，么么哒。
