[英]Which component should I use class or functional?
我正在尝试使用 react-native-camera 并且我想将令牌从第一页发送到相机页面。 如何在相机页面上获取令牌? 我不知道如何解决这个问题,我尝试将相机页面更改为基于 function 的组件,但我收到更多错误:) 所以如果你们帮助我,我会很高兴
第一个页面是基于功能的组件
import React from 'react';
import {View, Text, TouchableOpacity, ActivityIndicator} from 'react-native';
const first = () => {
const token = '12345678';
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
{isData?(
<TouchableOpacity
onPress={() => {
navigation.navigate('cameraV2', {token:token});
}}
style={{
height: 50,
width: '80%',
backgroundColor: '#f45f00',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{fontWeight: 'bold', fontSize: 18}}>
Giriş için tıklayın
</Text>
</TouchableOpacity>
):(
<ActivityIndicator size='large' color='#0f0' />
)}
</View>
);
};
export default first;
相机页面是基于 class 的组件
import React, {Component} from 'react';
import {Button, Text, View} from 'react-native';
import {RNCamera} from 'react-native-camera';
class cameraV2 extends Component {
navigation = this.props.navigation;
constructor(props) {
super(props);
this.camera = null;
this.barcodeCodes = [];
this.state = {
token:this.navigation.token,
is_camera: 0,
is_loading: 0,
barcodes: [],
camera: {
type: RNCamera.Constants.Type.back,
flashMode: RNCamera.Constants.FlashMode.auto,
},
};
}
barcodeRecognized = ({barcodes}) => {
barcodes.forEach(barcode => {
if(barcode.type!=='UNKNOWN_FORMAT'){
console.log(barcode.data)
this.setState({barcodes});
}
});
};
render() {
return (
<View style={styles.container}>
<RNCamera
ref={ref => {
this.camera = ref;
}}
defaultTouchToFocus
flashMode={this.state.camera.flashMode}
mirrorImage={false}
//onBarCodeRead={this.onBarCodeRead.bind(this)}
onGoogleVisionBarcodesDetected={this.barcodeRecognized}
onFocusChanged={() => {}}
onZoomChanged={() => {}}
permissionDialogTitle={'Permission to use camera'}
permissionDialogMessage={
'We need your permission to use your camera phone'
}
style={styles.preview}
type={this.state.camera.type}
/>
<View style={[styles.overlay, styles.topOverlay]}>
<Text style={styles.scanScreenMessage}>Please scan the barcode.</Text>
<Text style={styles.scanScreenMessage}>token: {this.state.token} </Text>
</View>
<View style={[styles.overlay, styles.bottomOverlay]}>
<Button
onPress={() =>
this.navigation.navigate('second', {
barcode: this.state.barcodes,
token: token,
})
}
style={styles.enterBarcodeManualButton}
title="Enter Barcode"
/>
</View>
</View>
);
}
}
const styles = {
container: {
flex: 1,
},
preview: {
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',
},
enterBarcodeManualButton: {
padding: 15,
backgroundColor: 'white',
borderRadius: 40,
},
scanScreenMessage: {
fontSize: 14,
color: 'white',
textAlign: 'center',
alignItems: 'center',
justifyContent: 'center',
},
};
export default cameraV2;
您只需要使用route params obtained from props
中的令牌值初始化 state
this.state = {
token: this.props.route.params.token,
is_camera: 0,
is_loading: 0,
barcodes: [],
camera: {
type: RNCamera.Constants.Type.back,
flashMode: RNCamera.Constants.FlashMode.auto,
},
};
}
PS您不需要将整个组件转换为功能组件只是为了使用参数
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.