Question

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

我尝试使用各种条形码扫描器库/程序包，包括在https://github.com/ideacreation/react-native-barcodescanner处找到的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});
    }

  }

}

我希望它具有一些信息，然后是QR码，然后是一个小框，用于显示相机所看到的内容。但是，我得到的只是一个空白框：

Photo of what my app displays

Answer 1

Expo仅显示用户最初构建的应用程序外观。它不会自动读取QR码。您将不得不使用另一个读码器从博览会屏幕上扫描已编译的QR码，以在框中获得扫描码的结果。

正如我想像的那样，我使用“闪电QR扫描仪”使用图像扫描了您生成的代码，并得到了以下结果：

希望这会有所帮助

世博相机未显示相机看到的内容

1 个答案: