世博相机没有显示相机看到的东西

Posted 2023-02-19

【中文标题】世博相机没有显示相机看到的东西

【英文标题】：Expo Camera Not Showing What Camera Sees

【发布时间】：2019-07-11 03:40:47

【问题描述】：

我正在尝试使用 Expo 的组件来创建 QRCode 扫描仪。它构建没有问题，但是当我打开它时，它会显示一个空白框，而不是相机看到的任何内容。

我尝试过使用各种条码扫描器库/包，包括此处的 BarCodeScanner：https://github.com/ideacreation/react-native-barcodescanner 以及 Expo 自己的 BarCodeScanner：https://docs.expo.io/versions/latest/sdk/bar-code-scanner/

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);
    

  

我希望它有一些信息，然后是一个二维码，然后是一个显示相机所见内容的小框。然而，我得到的只是一个空白框：

Photo of what my app displays

【问题讨论】：

如何结束这个问题？我意识到我只是犯了一个错误，并没有真正在我为其分配的视图中调用函数_maybeRenderQRCodeScanner()。

【参考方案1】：

Expo 仅向用户展示您的应用构建最初的样子。它不会自动读取二维码。您必须使用另一个代码阅读器从博览会屏幕上扫描已编译的 QR 代码，以获取盒子中扫描代码的结果。

我使用“Lightning QR 扫描仪”使用您的图像扫描了您生成的代码，我想您会期望用户这样做，并得到以下结果：

希望对你有帮助

【讨论】：

嗨，Rachel，感谢您的回复，但我认为您误解了我的问题（或者，更有可能是我的问题不够清楚）。我不希望应用程序自行读取二维码；相反，您在 QR 码下方看到的框应该是可以扫描其他 QR 码的 QR 扫描仪。它是使用 react-native-barcodescanner 或 react-native-camera 之类的库生成的，因此它应该显示手机摄像头看到的任何内容（在首先请求许可之后）。但是，它目前没有显示相机应该看到的内容。