react-native-smart-barcode react-native-smart-timer-enhancejava
npm install react-native-smart-barcode --save
npm install react-native-smart-timer-enhance --save
复制代码
IOS配置node
1.将\node_modules\react-native-smart-barcode\ios\RCTBarcode\RCTBarCode.xcodeproj 添加到Xcode项目中,以下图: react
2.添加依赖,Build Phases->Link Binary With Libraries 加入RCTBarCode.xcodeproj\Products\libRCTBarCode.a(直接拖),以下图: android
3.肯定一下Build Settings->Seach Paths->Header Search Paths是否有$(SRCROOT)/../../../react-native/React 如果没有就添加 而且设为recursive ios
4.将\node_modules\react-native-smart-barcode\ios\raw 文件夹拖到到Xcode项目中(确保文件夹是蓝色的),以下图: git
5.在info.plist添加相机权限 Privacy - Camera Usage Description: github
react-native 代码npm
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)
复制代码
附原文react-native
1 在android/settings.gradle文件中:xcode
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"/>
复制代码
可能会遇到的问题
做者:你的男孩_阿强 连接:http://cdn2.jianshu.io/p/8bef243bc35d
连接 https://github.com/yxwandroid/rnMydemo