javascript - 我应该使用哪个组件或函数?
问题描述
我正在尝试使用 react-native-camera 并且我想将令牌从第一页发送到相机页面。如何在相机页面上获取令牌?我不知道如何解决这个问题,我试图将相机页面更改为基于功能的组件,但我收到更多错误:) 所以如果你们帮助我,我会很高兴
第一个页面是基于功能的组件
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;
相机页面是基于类的组件
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
而不是导航来初始化状态
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您不需要将整个组件转换为功能组件只是为了使用参数
推荐阅读
- image - 图像在组件重新渲染时消失
- java - 生成任意数量的视图
- c# - 泛型类型参数 C# - 如何泛型类返回类型
- python - 如何随着时间的推移将多个复杂的信号发送到同一个时隙
- python - 为机器学习管道设置 Flask 架构
- javascript - AWS Lambda node.js 中 HTTP 请求的基本身份验证
- tensorflow - 是否有特定于“tensorflow.not_equal()”的形状/轴等价物?
- java - 在 JAVA 中将新字段添加到图像的 GPS 目录
- javascript - 使用 Jquery 从不同页面打开模式
- python - 找不到 pygame 模块(Windows 10、Spyder IDE 版本 4.1.3、Python 3.8)