Skip to content

M
manager-app-sz
提交 c6aa0b65 authored 作者: 吴强's avatar 吴强
浏览文件
操作

fix bug

上级 018d456c
隐藏空白字符变更
内嵌 并排
正在显示 包含 766 行增加 和 47 行删除
src/components/QRScannerBorder.js 0 → 100644
浏览文件 @ c6aa0b65
import React, { Component } from 'react';
import
{
ActivityIndicator,
StyleSheet,
View,
Animated,
Easing,
Text,
Image,
} from 'react-native';
/**
* 扫描界面遮罩
* 单独写一个类，方便拷贝使用
*/
class QRScannerBorder extends Component {
static defaultProps = {
maskColor: '#0000004D',
cornerColor: '#22ff00',
borderColor: '#000000',
rectHeight: 200,
rectWidth: 200,
borderWidth: 0,
cornerBorderWidth: 4,
cornerBorderLength: 20,
isLoading: false,
cornerOffsetSize: 0,
isCornerOffset: false,
bottomMenuHeight: 0,
scanBarAnimateTime: 2500,
scanBarColor: '#22ff00',
scanBarImage: null,
scanBarHeight: 1.5,
scanBarMargin: 6,
hintText: '将二维码/条码放入框内，即可自动扫描',
hintTextStyle: { color: '#fff', fontSize: 14, backgroundColor: 'transparent' },
hintTextPosition: 130,
isShowScanBar: true,
};
constructor(props) {
super(props);
this.getBackgroundColor = this.getBackgroundColor.bind(this);
this.getRectSize = this.getRectSize.bind(this);
this.getCornerSize = this.getCornerSize.bind(this);
this.renderLoadingIndicator = this.renderLoadingIndicator.bind(this);
this.state = {
topWidth: 0,
topHeight: 0,
leftWidth: 0,
animatedValue: new Animated.Value(0),
};
}
componentDidMount() {
this.scannerLineMove();
}
// 获取背景颜色
getBackgroundColor() {
return ({
backgroundColor: this.props.maskColor,
});
}
// 获取扫描框背景大小
getRectSize() {
return ({
height: this.props.rectHeight,
width: this.props.rectWidth,
});
}
// 获取扫描框边框大小
getBorderSize() {
if (this.props.isCornerOffset) {
return ({
height: this.props.rectHeight - this.props.cornerOffsetSize * 2,
width: this.props.rectWidth - this.props.cornerOffsetSize * 2,
});
} else {
return ({
height: this.props.rectHeight,
width: this.props.rectWidth,
});
}
}
// 获取扫描框转角的颜色
getCornerColor() {
return ({
borderColor: this.props.cornerColor,
});
}
// 获取扫描框转角的大小
getCornerSize() {
return ({
height: this.props.cornerBorderLength,
width: this.props.cornerBorderLength,
});
}
// 获取扫描框大小
getBorderWidth() {
return ({
borderWidth: this.props.borderWidth,
});
}
// 获取扫描框颜色
getBorderColor() {
return ({
borderColor: this.props.borderColor,
});
}
// 获取顶部遮罩高度
getTopMaskHeight() {
if (this.props.isCornerOffset) {
return this.state.topHeight + this.props.rectHeight - this.props.cornerOffsetSize;
} else {
return this.state.topHeight + this.props.rectHeight;
}
}
// 获取底部遮罩高度
getBottomMaskHeight() {
if (this.props.isCornerOffset) {
return this.props.rectHeight + this.state.topHeight - this.props.cornerOffsetSize;
} else {
return this.state.topHeight + this.props.rectHeight;
}
}
// 渲染加载动画
// 获取左右两边遮罩高度
getSideMaskHeight() {
if (this.props.isCornerOffset) {
return this.props.rectHeight - this.props.cornerOffsetSize * 2;
} else {
return this.props.rectHeight;
}
}
// 获取左右两边遮罩宽度
getSideMaskWidth() {
if (this.props.isCornerOffset) {
return this.state.leftWidth + this.props.cornerOffsetSize;
} else {
return this.state.leftWidth;
}
}
getBottomMenuHeight() {
return ({
bottom: this.props.bottomMenuHeight,
});
}
getScanBarMargin() {
return ({
marginRight: this.props.scanBarMargin,
marginLeft: this.props.scanBarMargin,
});
}
getScanImageWidth() {
return this.props.rectWidth - this.props.scanBarMargin * 2;
}
// 测量整个扫描组件的大小
measureTotalSize(e) {
const totalSize = e.layout;
this.setState({
topWidth: totalSize.width,
});
}
// 测量扫描框的位置
measureRectPosition(e) {
const rectSize = e.layout;
this.setState({
topHeight: rectSize.y,
leftWidth: rectSize.x,
});
}
scannerLineMove() {
this.state.animatedValue.setValue(0); // 重置Rotate动画值为0
Animated.timing(this.state.animatedValue, {
toValue: this.props.rectHeight,
duration: this.props.scanBarAnimateTime,
easing: Easing.linear,
}).start(() => this.scannerLineMove());
}
// 绘制扫描线
renderScanBar() {
if (!this.props.isShowScanBar) return;
if (this.props.scanBarImage) {
return (
<Image
style={{ resizeMode: 'contain', width: this.getScanImageWidth() }}
source={this.props.scanBarImage}
/>
);
} else {
return (
<View style={[this.getScanBarMargin(), {
backgroundColor: this.props.scanBarColor,
height: this.props.scanBarHeight,
}]}
/>
);
}
}
renderLoadingIndicator() {
if (!this.props.isLoading) {
return null;
}
return (
<ActivityIndicator
animating={this.props.isLoading}
color={this.props.color}
size="large"
/>
);
}
render() {
const animatedStyle = {
transform: [
{ translateY: this.state.animatedValue },
],
};
return (
<View
onLayout={({ nativeEvent: e }) => this.measureTotalSize(e)}
style={[styles.container, this.getBottomMenuHeight()]}
>
<View
style={[styles.viewfinder, this.getRectSize()]}
onLayout={({ nativeEvent: e }) => this.measureRectPosition(e)}
>
{/* 扫描框边线 */}
<View style={[
this.getBorderSize(),
this.getBorderColor(),
this.getBorderWidth(),
]}
>
<Animated.View
style={[
animatedStyle,
]}
>
{this.renderScanBar()}
</Animated.View>
</View>
{/* 扫描框转角-左上角 */}
<View style={[
this.getCornerColor(),
this.getCornerSize(),
styles.topLeftCorner,
{
borderLeftWidth: this.props.cornerBorderWidth,
borderTopWidth: this.props.cornerBorderWidth,
},
]}
/>
{/* 扫描框转角-右上角 */}
<View style={[
this.getCornerColor(),
this.getCornerSize(),
styles.topRightCorner,
{
borderRightWidth: this.props.cornerBorderWidth,
borderTopWidth: this.props.cornerBorderWidth,
},
]}
/>
{/* 加载动画 */}
{this.renderLoadingIndicator()}
{/* 扫描框转角-左下角 */}
<View style={[
this.getCornerColor(),
this.getCornerSize(),
styles.bottomLeftCorner,
{
borderLeftWidth: this.props.cornerBorderWidth,
borderBottomWidth: this.props.cornerBorderWidth,
},
]}
/>
{/* 扫描框转角-右下角 */}
<View style={[
this.getCornerColor(),
this.getCornerSize(),
styles.bottomRightCorner,
{
borderRightWidth: this.props.cornerBorderWidth,
borderBottomWidth: this.props.cornerBorderWidth,
},
]}
/>
</View>
<View style={[
this.getBackgroundColor(),
styles.topMask,
{
bottom: this.getTopMaskHeight(),
width: this.state.topWidth,
},
]}
/>
<View style={[
this.getBackgroundColor(),
styles.leftMask,
{
height: this.getSideMaskHeight(),
width: this.getSideMaskWidth(),
},
]}
/>
<View style={[
this.getBackgroundColor(),
styles.rightMask,
{
height: this.getSideMaskHeight(),
width: this.getSideMaskWidth(),
}]}
/>
<View style={[
this.getBackgroundColor(),
styles.bottomMask,
{
top: this.getBottomMaskHeight(),
width: this.state.topWidth,
}]}
/>
<View style={{ position: 'absolute', bottom: this.props.hintTextPosition }}>
<Text style={this.props.hintTextStyle}>{this.props.hintText}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
buttonsContainer: {
position: 'absolute',
height: 100,
bottom: 0,
left: 0,
right: 0,
},
container: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 0,
right: 0,
left: 0,
},
viewfinder: {
alignItems: 'center',
justifyContent: 'center',
},
topLeftCorner: {
position: 'absolute',
top: 0,
left: 0,
},
topRightCorner: {
position: 'absolute',
top: 0,
right: 0,
},
bottomLeftCorner: {
position: 'absolute',
bottom: 0,
left: 0,
},
bottomRightCorner: {
position: 'absolute',
bottom: 0,
right: 0,
},
topMask: {
position: 'absolute',
top: 0,
},
leftMask: {
position: 'absolute',
left: 0,
},
rightMask: {
position: 'absolute',
right: 0,
},
bottomMask: {
position: 'absolute',
bottom: 0,
},
});
export default QRScannerBorder;
src/components/QRScannerViewComponent.js 0 → 100644
浏览文件 @ c6aa0b65
import React, { Component } from 'react';
import Camera from 'react-native-camera';
import
{
StyleSheet,
View,
} from 'react-native';
import QRScannerBorder from './QRScannerBorder';
/**
* 扫描界面
*/
class QRScannerViewComponent extends Component {
static defaultProps = {
maskColor: '#0000004D',
cornerColor: '#22ff00',
borderColor: '#000000',
rectHeight: 200,
rectWidth: 200,
borderWidth: 0,
cornerBorderWidth: 4,
cornerBorderLength: 20,
isLoading: false,
cornerOffsetSize: 0,
isCornerOffset: false,
bottomMenuHeight: 0,
scanBarAnimateTime: 2500,
scanBarColor: '#22ff00',
scanBarImage: null,
scanBarHeight: 1.5,
scanBarMargin: 6,
hintText: '将二维码/条码放入框内，即可自动扫描',
hintTextStyle: { color: '#fff', fontSize: 14, backgroundColor: 'transparent' },
hintTextPosition: 130,
isShowScanBar: true,
};
constructor(props) {
super(props);
// 通过这句代码屏蔽 YellowBox
console.disableYellowBox = true;
}
render() {
return (
<View style={{ flex: 1 }}>
<Camera
onBarCodeRead={this.props.onScanResultReceived}
style={{ flex: 1 }}
>
{/* 绘制顶部标题栏组件 */}
{this.props.renderTopBarView()}
{/* 绘制扫描遮罩 */}
<QRScannerBorder
maskColor={this.props.maskColor}
cornerColor={this.props.cornerColor}
borderColor={this.props.borderColor}
rectHeight={this.props.rectHeight}
rectWidth={this.props.rectWidth}
borderWidth={this.props.borderWidth}
cornerBorderWidth={this.props.cornerBorderWidth}
cornerBorderLength={this.props.cornerBorderLength}
isLoading={this.props.isLoading}
cornerOffsetSize={this.props.cornerOffsetSize}
isCornerOffset={this.props.isCornerOffset}
bottomMenuHeight={this.props.bottomMenuHeight}
scanBarAnimateTime={this.props.scanBarAnimateTime}
scanBarColor={this.props.scanBarColor}
scanBarHeight={this.props.scanBarHeight}
scanBarMargin={this.props.scanBarMargin}
hintText={this.props.hintText}
hintTextStyle={this.props.hintTextStyle}
scanBarImage={this.props.scanBarImage}
hintTextPosition={this.props.hintTextPosition}
isShowScanBar={this.props.isShowScanBar}
/>
{/* 绘制底部操作栏 */}
<View style={[styles.buttonsContainer, this.props.bottomMenuStyle]}>
{this.props.renderBottomMenuView()}
</View>
</Camera>
</View>
);
}
}
const styles = StyleSheet.create({
buttonsContainer: {
position: 'absolute',
height: 100,
bottom: 0,
left: 0,
right: 0,
},
container: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 0,
right: 0,
left: 0,
},
viewfinder: {
alignItems: 'center',
justifyContent: 'center',
},
topLeftCorner: {
position: 'absolute',
top: 0,
left: 0,
},
topRightCorner: {
position: 'absolute',
top: 0,
right: 0,
},
bottomLeftCorner: {
position: 'absolute',
bottom: 0,
left: 0,
},
bottomRightCorner: {
position: 'absolute',
bottom: 0,
right: 0,
},
topMask: {
position: 'absolute',
top: 0,
},
leftMask: {
position: 'absolute',
left: 0,
},
rightMask: {
position: 'absolute',
right: 0,
},
bottomMask: {
position: 'absolute',
bottom: 0,
},
});
export default QRScannerViewComponent;
src/components/cameraComponent.js
浏览文件 @ c6aa0b65
import React, { Component } from 'react'; import React from 'react';
import { import {
StyleSheet,
Text,
View, View,
Image,
StatusBar,
StyleSheet,
TouchableOpacity,
} from 'react-native'; } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Camera from 'react-native-camera'; import Camera from 'react-native-camera';
class CameraComponent extends Component { const styles = StyleSheet.create({
takePicture() { container: {
const options = {}; flex: 1,
//options.location = ... marginTop: 50,
this.camera.capture({ metadata: options }) },
.then((data) => console.log(data)) preview: {
.catch(err => console.error(err)); flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
},
overlay: {
position: 'absolute',
padding: 16,
right: 0,
left: 0,
alignItems: 'center',
},
topOverlay: {
top: 0,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
bottomOverlay: {
bottom: 0,
backgroundColor: 'rgba(0,0,0,0.4)',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
captureButton: {
padding: 15,
backgroundColor: 'white',
borderRadius: 40,
},
typeButton: {
padding: 5,
},
});
class CameraComponent extends React.Component {
constructor(props) {
super(props);
this.camera = null;
this.state = {
camera: {
aspect: Camera.constants.Aspect.fill,
captureTarget: Camera.constants.CaptureTarget.cameraRoll,
type: Camera.constants.Type.back,
orientation: Camera.constants.Orientation.auto,
},
isRecording: false,
};
this.switchCam = this.switchCam.bind(this);
this.recording = this.recording.bind(this);
} }
get typeIcon() {
let icon;
const { back, front } = Camera.constants.Type;
if (this.state.camera.type === back) {
Icon.getImageSource('camera_front', 20, 'white').then((source) => { console.info(source); icon = source.uri; });
console.info(icon);
// icon = require('./assets/ic_camera_rear_white.png');
} else if (this.state.camera.type === front) {
Icon.getImageSource('camera_rear', 20, 'white').then((source) => { console.info(source); icon = source.uri; });
// icon = require('./assets/ic_camera_front_white.png');
console.info(icon);
}
return icon;
}
get camButton() {
let img;
if (!this.state.isRecording) {
Icon.getImageSource('videocam', 36, 'white').then((source) => { console.info(source); img = source.uri; });
// img = require('./assets/ic_videocam_36pt.png');
console.info(img);
} else {
// img = require('./assets/ic_stop_36pt.png');
Icon.getImageSource('stop', 36, 'white').then((source) => { console.info(source); img = source.uri; });
console.info(img);
}
return img;
}
switchCam() {
let newType;
const { back, front } = Camera.constants.Type;
if (this.state.camera.type === back) {
newType = front;
} else if (this.state.camera.type === front) {
newType = back;
}
this.setState({
camera: {
...this.state.camera,
type: newType,
},
});
}
recording() {
console.log(!this.state.isRecording);
if (!this.state.isRecording) {
if (this.camera) {
this.camera.capture({ mode: Camera.constants.CaptureMode.video })
.then(data => console.log(data))
.catch(err => console.error(err));
this.setState({ isRecording: true });
}
console.log('recording');
} else {
if (this.camera) {
this.camera.stopCapture();
this.setState({ isRecording: false });
}
console.log('stopped ');
}
}
render() { render() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<StatusBar animated hidden={false} />
<Camera <Camera
ref={(cam) => { ref={(cam) => {
this.camera = cam; this.camera = cam;
}} }}
style={styles.preview} style={styles.preview}
aspect={Camera.constants.Aspect.fill} aspect={this.state.camera.aspect}
barCodeTypes={['pdf417', 'code128']} captureTarget={this.state.camera.captureTarget}
onBarCodeRead={evt => console.log(evt)} type={this.state.camera.type}
> defaultTouchToFocus
<Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text> mirrorImage={false}
</Camera> />
<View style={[styles.overlay, styles.topOverlay]}>
<TouchableOpacity style={styles.typeButton} onPress={this.switchCam}>
<Image source={this.typeIcon} />
</TouchableOpacity>
</View>
<View style={[styles.overlay, styles.bottomOverlay]}>
<TouchableOpacity style={styles.captureButton} onPress={this.recording}>
<Image source={this.camButton} />
</TouchableOpacity>
</View>
</View> </View>
); );
} }
} }
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
color: '#000',
padding: 10,
margin: 40,
},
});
export default CameraComponent; export default CameraComponent;
src/models/peopleInfo/peopleInfo.js
浏览文件 @ c6aa0b65
...@@ -158,12 +158,14 @@ export default { ...@@ -158,12 +158,14 @@ export default {
detailData: payload, detailData: payload,
}; };
}, },
setdetailData(state, { payload: { peopleName, idcard, birthDay, people } }) { setdetailData(state, { payload: { peopleName, idcard, birthDay, people, sex, addr } }) {
const detailData = { const detailData = {
xingMing: peopleName, xingMing: peopleName,
identityCard: idcard, identityCard: idcard,
birthday: birthDay, birthday: birthDay,
minZu: people, minZu: people,
xingBie: sex,
huJiDiZhi: addr,
}; };
return { ...state, detailData }; return { ...state, detailData };
}, },
......
src/routes/main/common/QRScannerScreen.js 0 → 100644
浏览文件 @ c6aa0b65
import React, { Component } from 'react';
import { Text } from 'react-native';
import QRScannerViewComponent from '../../../components/QRScannerViewComponent';
class QRScannerScreen extends Component {
barcodeReceived= (e) => {
console.info(`Type: ${e.type}Data: ${e.data}`);
}
renderTitleBar= () => {
return (
<Text
style={{ color: 'white', textAlignVertical: 'center', textAlign: 'center', font: 20, padding: 12 }}
>这里添加标题
</Text>
);
}
renderMenu =() => {
return (
<Text
style={{ color: 'white', textAlignVertical: 'center', textAlign: 'center', font: 20, padding: 12 }}
>这里添加底部菜单
</Text>
);
}
render() {
return (
<QRScannerViewComponent
onScanResultReceived={this.barcodeReceived}
renderTopBarView={this.renderTitleBar}
renderBottomMenuView={this.renderMenu}
/>
);
}
}
export default QRScannerScreen;
src/routes/main/dangshireninfo/DSRInfoDetailScreen.js
浏览文件 @ c6aa0b65
...@@ -8,7 +8,6 @@ import { List, InputItem, Toast, WhiteSpace, WingBlank } from 'antd-mobile'; ...@@ -8,7 +8,6 @@ import { List, InputItem, Toast, WhiteSpace, WingBlank } from 'antd-mobile';
import Icon from 'react-native-vector-icons/FontAwesome'; import Icon from 'react-native-vector-icons/FontAwesome';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createAction } from '../../../utils'; import { createAction } from '../../../utils';
import CameraComponent from '../../../components/cameraComponent';
@connect(({ DSRInfoDetail }) => ({ DSRInfoDetail })) @connect(({ DSRInfoDetail }) => ({ DSRInfoDetail }))
class DSRInfoDetailScreen extends React.Component { class DSRInfoDetailScreen extends React.Component {
...@@ -17,7 +16,8 @@ class DSRInfoDetailScreen extends React.Component { ...@@ -17,7 +16,8 @@ class DSRInfoDetailScreen extends React.Component {
this.props.dispatch(createAction('DSRInfoDetail/getDSRInfoDetail')(id)); this.props.dispatch(createAction('DSRInfoDetail/getDSRInfoDetail')(id));
} }
onEdit =() => { onEdit =() => {
this.props.dispatch(createAction('DSRInfoDetail/setEnable')(true)); // this.props.dispatch(createAction('DSRInfoDetail/setEnable')(true));
this.props.navigation.navigate('CameraPhoto');
}; };
onSubmit = () => { onSubmit = () => {
this.props.form.validateFields({ force: true }, (error, value) => { this.props.form.validateFields({ force: true }, (error, value) => {
...@@ -122,12 +122,12 @@ class DSRInfoDetailScreen extends React.Component { ...@@ -122,12 +122,12 @@ class DSRInfoDetailScreen extends React.Component {
<WingBlank> <WingBlank>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
{/* <Icon.Button {/* <Icon.Button
name="edit" name="edit"
backgroundColor="#08BBF9" backgroundColor="#08BBF9"
onPress={this.onEdit} onPress={this.onEdit}
> >
编辑 编辑
</Icon.Button> */} </Icon.Button> */}
</View> </View>
<WhiteSpace /> <WhiteSpace />
<List> <List>
......
src/routes/main/index.js
浏览文件 @ c6aa0b65
...@@ -8,6 +8,8 @@ import peopleInfoErJiScreen from './peopleInfo/index'; ...@@ -8,6 +8,8 @@ import peopleInfoErJiScreen from './peopleInfo/index';
import DSRErJiScreen from './dangshireninfo/index'; import DSRErJiScreen from './dangshireninfo/index';
import quanshuInfoErJiScreen from './quanshuInfo/index'; import quanshuInfoErJiScreen from './quanshuInfo/index';
import TabBarComponent from '../../components/tabBarComponent'; import TabBarComponent from '../../components/tabBarComponent';
import QRScannerScreen from './common/QRScannerScreen';
import CameraComponent from '../../components/cameraComponent';
const Content = TabNavigator({ const Content = TabNavigator({
FWInfo: { FWInfo: {
...@@ -91,6 +93,12 @@ const MainWindow = StackNavigator( ...@@ -91,6 +93,12 @@ const MainWindow = StackNavigator(
personCenter: { personCenter: {
screen: userInfoPageScreen, screen: userInfoPageScreen,
}, },
QRScan: {
screen: QRScannerScreen,
},
CameraPhoto: {
screen: CameraComponent,
},
}, },
{ {
headerMode: 'none', headerMode: 'none',
......
src/utils/config.js
浏览文件 @ c6aa0b65
...@@ -30,8 +30,8 @@ const config = { ...@@ -30,8 +30,8 @@ const config = {
productId: 'manager-app-sz', productId: 'manager-app-sz',
footerText: '上海铂蓝信息科技有限公司', footerText: '上海铂蓝信息科技有限公司',
contextPath: '', contextPath: '',
apiContextPath: 'http://14.21.68.149:9089/test', // apiContextPath: 'http://14.21.68.149:9089/test',
// apiContextPath: 'http://192.168.1.22:8080/bm', apiContextPath: 'http://192.168.1.22:8080/bm',
defaultDateFormat, defaultDateFormat,
defaultTimeFormat, defaultTimeFormat,
defaultDateTimeFormat, defaultDateTimeFormat,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论