Commit ebb67d79 by Denglingling

增加【扫描条形码】相关组件、图标

(cherry picked from commit 31a18c1f)
parent ee601ec6
......@@ -18,6 +18,7 @@ import FillUnitPricePage from './containers/equipConsu/module/FillUnitPricePage'
import QuickOrderPage from './containers/quickOrder/QuickOrderPage';
import TransOrderPage from './containers/transOrder/TransOrderPage';
import TransSearchPage from './containers/transOrder/module/TransSearchPage';
import BarCodePage from './containers/transOrder/module/BarCodePage';
import HistoricalOrderPage from './containers/historicalOrder/HistoricalOrderPage';
import LineOrderPage from './containers/historicalOrder/module/LineOrderPage';
import SubSuccPage from './containers/common/SubSuccPage';
......@@ -35,6 +36,7 @@ const Router = createAppContainer(createStackNavigator({
QuickOrderPage: {screen: QuickOrderPage},
TransOrderPage: {screen: TransOrderPage},
TransSearchPage: {screen: TransSearchPage},
BarCodePage: {screen: BarCodePage},
HistoricalOrderPage: {screen: HistoricalOrderPage},
LineOrderPage: {screen: LineOrderPage},
SubSuccPage: {screen: SubSuccPage}
......
import React, { Component } from 'react';
import {
View,
StyleSheet,
Text,
Animated,
Easing,
InteractionManager,
TouchableOpacity,
Image,
SafeAreaView
} from 'react-native';
import {
title_text_color,
pxSize,
Height,
Width,
icon_style,
safe_view,
promary_color
} from '../../../base/BaseStyle';
import { show } from '../../../utils/Utils';
import { RNCamera } from 'react-native-camera';
import StatusBarView from '../../common/StatusBarView';
class BarCodePage extends Component {
constructor(props) {
super(props);
this.state = {
transCode:'', // 条码
typeCode: '', // 条码类型
showCode: true,
// animate: new Animated.Value(0), // 二维坐标{x:0,y:0}
animateCode: new Animated.Value((Width() - 200) / 2,(Height() - 340) / 2),
}
}
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.startAnimation()
})
console.log('进入-------', this.state.showCode)
}
// 动画开始
startAnimation() {
// if(this.state.showCode) {
this.state.animateCode.setValue(0)
Animated.timing(this.state.animateCode, {
toValue: 1, // 运动终止位置,比值
duration: 2500, // 动画时长
easing: Easing.linear, // 线性的渐变函数
delay: 0.3, // 在一段时间之后开始动画(单位是毫秒),默认为0
}).start(() => this.startAnimation())
// }
}
componentWillUnmount() {
this.state.showCode = false
console.log('进入-结束🔚------', this.state.showCode)
}
barcodeReceived(e) {
let that = this
let { typeName, supPage } = that.props.navigation.state.params
if(this.state.showCode){
console.log(e);
that.setState({
transCode: e.data,
typeCode: e.type,
showCode: false
})
if(e.data) {
let barCodeData = {
typeName: typeName,
typeValue: e.data
}
that.props.navigation.navigate(supPage.pageName, { barCodeData, title: supPage.title })
}
}
}
// 关闭扫一扫
closeScanPage() {
let { supPage } = this.props.navigation.state.params
this.props.navigation.navigate(supPage.pageName, { title: supPage.title })
}
render() {
return (
<View style={styles.container}>
<StatusBarView
isReactStackNavigator={true}
backgroundColor={promary_color}
barStyle = 'light-content'
/>
<SafeAreaView style={safe_view}>
<RNCamera
onBarCodeRead={this.barcodeReceived.bind(this)}
onCameraReady={() => {
console.log('ready')
}}
permissionDialogTitle={'提示信息'}
permissionDialogMessage={'APP需要使用相机,请打开相机权限允许APP使用'}
style={styles.scan_camera}
>
<View style={styles.scan_cont_box}>
<View style={styles.scan_cont_circle}>
<Animated.View style={{
alignItems: 'center',
transform: [{
// translateX: x轴移动
// translateY: y轴移动
translateY: this.state.animateCode.interpolate({
inputRange: [0,1],
outputRange: [0,200]
})
}]
}}>
<Text style={styles.scan_circle_init}></Text>
</Animated.View>
</View>
</View>
<TouchableOpacity
activeOpacity={.8}
style={styles.scan_top_box}
onPress={() => this.closeScanPage()}
>
<Image source={require('../../../images/close_white_icon2.png')} style={icon_style}/>
</TouchableOpacity>
<View style={styles.scan_info_box}>
<Text style={styles.scan_info}>将条形码放入框内,即可自动扫描</Text>
</View>
</RNCamera>
</SafeAreaView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
scan_top_box: {
position: "absolute",
left: 20,
top: 20,
width: pxSize(24),
height: pxSize(24)
},
scan_camera: {
flex: 1,
height: Height()
},
scan_cont_box: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.3)',
},
scan_cont_circle: {
width: 260,
height: 260,
borderWidth: 1,
borderColor: '#919191',
backgroundColor: 'rgba(255,255,255,0.1)'
},
scan_circle_init: {
width:250,
height:1,
backgroundColor:'#00ff00'
},
scan_info_box: {
height: 100,
backgroundColor: 'rgba(0,0,0,0.3)',
alignItems: 'center',
width: Width()
},
scan_info: {
color: title_text_color
},
info: {
width: Width(),
height: 80,
backgroundColor: '#fff',
paddingLeft: 10,
paddingBottom:5,
justifyContent: 'space-around',
},
})
export default BarCodePage;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment