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