react-native-camera 掃描二維碼
阿新 • • 發佈:2018-11-26
Github:https://github.com/react-native-community/react-native-camera
android:
1、npm install react-native-camera --save
之後直接 react-native link react-native-camera 有問題在手動配置
2、settings.gradle
:
include ':react-native-camera' project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
3、app/build.gradle
dependencies {
...
compile project(':react-native-camera')
}
4、AndroidManifest.xml:
<uses-permission android:name="android.permission.CAMERA" />//相機許可權 <uses-permission android:name="android.permission.VIBRATE" />//震動許可權 <uses-feature android:name="android.hardware.camera" android:required="false" /> <uses-feature android:name="android.hardware.camera.front" android:required="false" />
5、MainApplication.java:
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNCameraPackage()
);
}
ios:
1、使用Xcode開啟CameraDemo/ios/CameraDemo.xcodeproj檔案,在Project navigator->Libraries資料夾上右擊選擇Add Files to 'CameraDemo'
2、選擇專案中的node_modules->react-native-camera並且新增RCTCamera.xcodeproj檔案
3、在Build Phases中新增libRCTCamera.a
4、在Build Settings中找到Search Paths下的Header Search Paths,新增$(SRCROOT)/../../react-native/React和$(SRCROOT)/../../../React,並且選擇recursive
5、開啟nfo.plist檔案,新增許可權
NSCameraUsageDescription 請允許使用您的相機
import React, {Component} from 'react';
import {
StyleSheet,
View,
Animated,
Easing,
Platform,
Text,
Dimensions,
InteractionManager
} from 'react-native';
import { RNCamera } from 'react-native-camera'
const { width,height } = Dimensions.get('window')
export default class Camera extends Component {
constructor(props) {
super(props);
this.state = {
transCode:'', // 條碼
type: '', // 條碼型別
show: true,
animate: new Animated.Value(0), // 二維座標{x:0,y:0}
}
}
componentDidMount(){
InteractionManager.runAfterInteractions(() => {
this.startAnimation()
})
}
// 動畫開始
startAnimation(){
if(this.state.show){
this.state.animate.setValue(0);
Animated.timing(this.state.animate,{
toValue: 1, // 運動終止位置,比值
duration: 2500, // 動畫時長
easing: Easing.linear, // 線性的漸變函式
delay: 0.5,// 在一段時間之後開始動畫(單位是毫秒),預設為0
}).start(() => this.startAnimation())
}
}
componentWillUnmount(){
this.state.show = false;
}
barcodeReceived(e){
if(this.state.show){
console.log(e);
this.setState({
transCode: e.data,
type: e.type,
show: false
})
}
}
render() {
return (
<View style={styles.container}>
<RNCamera
onBarCodeRead={this.barcodeReceived.bind(this)}
onCameraReady={() => {
console.log('ready')
}}
permissionDialogTitle={'Permission to use camera'}
permissionDialogMessage={'We need your permission to use your camera phone'}
style={styles.camera}
>
<View style={styles.box}>
<View style={styles.kuang}>
<Animated.View style={{
alignItems: 'center',
transform: [{
// translateX: x軸移動
// translateY: y軸移動
translateY: this.state.animate.interpolate({
inputRange: [0,1],
outputRange: [0,200]
})
}]
}}>
<Text style={{width:250,height:1,backgroundColor:'#00ff00'}}></Text>
</Animated.View>
</View>
</View>
<View style={styles.info}>
<Text>條碼資訊:{this.state.transCode}</Text>
<Text>條碼型別:{this.state.type}</Text>
</View>
</RNCamera>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
camera: {
flex: 1,
},
box: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.6)',
},
kuang: {
width: 260,
height: 260,
borderWidth: 1,
borderColor: 'skyblue',
backgroundColor: '#rgba(255,255,255,0.1)'
},
info: {
width: width,
height: 80,
backgroundColor: '#fff',
paddingLeft: 10,
paddingBottom:5,
justifyContent: 'space-around',
}
});