React native 世博相机不显示相机看到的东西
我正在尝试使用Expo的组件创建QRCode扫描仪。它的构建没有问题,但当我打开它时,它会显示一个空白框,而不是相机看到的任何东西 我尝试过使用各种条形码扫描仪库/软件包,包括在此处找到的条形码扫描仪,以及世博会自己的条形码扫描仪:React native 世博相机不显示相机看到的东西,react-native,expo,React Native,Expo,我正在尝试使用Expo的组件创建QRCode扫描仪。它的构建没有问题,但当我打开它时,它会显示一个空白框,而不是相机看到的任何东西 我尝试过使用各种条形码扫描仪库/软件包,包括在此处找到的条形码扫描仪,以及世博会自己的条形码扫描仪: 从“expo”导入{Camera,Permissions,BarCodeScanner}; 从“react native QRCode”导入QRCode; render(){ 返回( {fullName} {userStatus} 生物 {bioText} { 试一
从“expo”导入{Camera,Permissions,BarCodeScanner};
从“react native QRCode”导入QRCode;
render(){
返回(
{fullName}
{userStatus}
生物
{bioText}
{
试一试{
等待注销();
}
捕获(e){
警惕,警惕(
“注销失败”,
e、 信息,
[{文本:“确定”,按:()=>{}]
);
返回;
}
this.props.navigation.navigate('Login');
}}
/>
{this.\u mayberenderAttendeStatus()}
);
}
_MayberenderStatus(){
var用户_状态=“”;
if(this.state.code已扫描){
if(this.state.isValidUser){
用户_状态='此人已注册';
}
否则{
用户_状态='此人未注册';
}
}
if(this.state.userType=='organizer'){
返回(
{user_status}
);
}
}
_maybeRenderQRCodeScanner=()=>{
console.log(“确定是否应该呈现二维码扫描仪”);
if(this.state.userType=='organizer'){
log(“用户是组织者”);
返回(
);
}
}
_handleBarCodeRead=({type,data})=>{
this.setState({codeHasBeenScanned:true});
console.log(“识别并扫描了条形码”);
如果(true){//以后需要更改此选项以更改基于数据的行为
this.setState({isValidUser:true});
}
否则{
this.setState({isValidUser:false});
}
}
}
我希望它有一些信息,然后是二维码,然后是一个小盒子,显示相机看到的东西。然而,我得到的只是一个空白框:
Expo仅显示用户最初对应用程序构建的看法。它不会自动读取二维码。您必须使用另一个代码读取器从世博会屏幕扫描已编译的二维码,以获得框中扫描代码的结果 我使用“Lightning QR Scanner”图像扫描了您生成的代码,正如我想象的那样,您希望用户这样做,结果如下:
希望这有帮助Expo仅向用户展示您的应用程序构建最初的样子。它不会自动读取二维码。您必须使用另一个代码读取器从世博会屏幕扫描已编译的二维码,以获得框中扫描代码的结果 我使用“Lightning QR Scanner”图像扫描了您生成的代码,正如我想象的那样,您希望用户这样做,结果如下:
希望这能有所帮助嗨,Rachel谢谢你的回答,但我想你误解了我的问题(或者,更可能的是,我没有把我的问题说清楚)。我不希望应用程序能够自己读取二维码;相反,你在二维码下面看到的盒子应该是一个可以扫描其他二维码的二维扫描仪。它是使用诸如react-native条形码扫描仪或react-native camera之类的库生成的,因此它应该显示手机摄像头看到的任何东西(在首次请求许可后)。不过,它目前没有显示摄像机应该看到什么。嗨,瑞秋,谢谢你的回答,但我想你误解了我的问题(或者,更可能的是,我没有把我的问题说清楚)。我不希望应用程序能够自己读取二维码;相反,你在二维码下面看到的盒子应该是一个可以扫描其他二维码的二维扫描仪。它是使用诸如react-native条形码扫描仪或react-native camera之类的库生成的,因此它应该显示手机摄像头看到的任何东西(在首次请求许可后)。但是,它目前没有显示相机应该看到什么。我如何结束这个问题?我意识到我只是犯了一个错误,在我分配给它的视图中从未真正调用过函数_maybeRenderQRCodeScanner()。我如何结束这个问题?我意识到我只是犯了一个错误,在我为其分配的视图中从未真正调用过函数_maybeRenderQRCodeScanner()。
import{ Camera, Permissions, BarCodeScanner } from 'expo';
import QRCode from 'react-native-qrcode';
render() {
return(
<ScrollView contentContainerStyle={styles.container}>
<View style={styles.fieldBox}>
<StatusBar barStyle="dark-content" />
<Image
source={require('../assets/images/profile_pic.jpg')}
style={styles.profileImg}/>
<View style={styles.nameBox}>
<Text style={styles.baseText, styles.headerText}>{fullName}</Text>
<Text style={styles.baseText, styles.headerText}>{userStatus}</Text>
</View>
<View style={styles.fieldBox}>
<Text style={styles.baseText}>Bio</Text>
<Text style={styles.baseText}>{bioText}</Text>
</View>
<View style={styles.fieldBox}>
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
<SocialIcon
title='Sign in with Facebook'
button
type='facebook'
/>
<Button
title="Logout"
onPress={async () => {
try {
await logout();
}
catch (e) {
Alert.alert(
"Failed to log out",
e.message,
[{ text: "Ok", onPress: () => { } }]
);
return;
}
this.props.navigation.navigate('Login');
}}
/>
</View>
<View style={styles.QRCode}>
<QRCode
value={"This is a test"}
bgColor='#000'
fgColor='#fff'
/>
</View>
<View style={styles.QRCode}>
</View>
<View>
{this._maybeRenderAttendeeStatus()}
</View>
</View>
</ScrollView>
);
}
_maybeRenderAttendeeStatus() {
var user_status = '';
if(this.state.codeHasBeenScanned){
if(this.state.isValidUser){
user_status = 'The person is registered';
}
else{
user_status = 'The person is not registered';
}
}
if(this.state.userType == 'organizer'){
return(
<View>
<Text>
{user_status}
</Text>
</View>
);
}
}
_maybeRenderQRCodeScanner = () => {
console.log("Determining if I should render QR code scanner");
if (this.state.userType == 'organizer') {
console.log("User is an organizer");
return (
<BarCodeScanner
onBarCodeRead={this._handleBarCodeRead}
/>
);
}
}
_handleBarCodeRead = ( { type, data }) => {
this.setState({codeHasBeenScanned:true});
console.log('barcode was recognized and scanned');
if(true){//later need to change this to change behavior based on data
this.setState({isValidUser:true});
}
else{
this.setState({isValidUser:false});
}
}
}