反应本机条形码阅读器无法正常工作？

Question

问题：

我创建了一个React Native应用程序。在那里，我正在使用expo-barcode-scanner。这就是我的代码的组织方式。

import React, { Component } from "react";

import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  TextInput,
  ScrollView,
  KeyboardAvoidingView,
} from "react-native";

import Dimensions from "Dimensions";

import * as Permissions from "expo-permissions";

import { BarCodeScanner } from "expo-barcode-scanner";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      QrPress: false,
      hasCameraPermission: null, 
    };
  }

  componentDidMount() {
    this.getPermissionsAsync(); 
  }

  getPermissionsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === "granted" });
  };

  _onPress_QrScan() {
    this.setState({
      QrPress: true
    });
  }

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({ QrPress: false, scanned: true, lastScannedUrl: data });
  };

  renderBarcodeReader() {
    const { hasCameraPermission, scanned } = this.state;

    if (hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    }
    return (
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          justifyContent: "flex-end"
        }}
      >
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
          style={StyleSheet.absoluteFillObject}
        />

        {scanned && (
          <Button
            title={"Tap to Scan Again"}
            onPress={() => this.setState({ scanned: false })}
          />
        )}
      </View>
    );
  }

  render() {
    const { hasCameraPermission, scanned, QrPress } = this.state;
    let marker = null;

    if (this.state.locationChosen) {
      marker = <MapView.Marker coordinate={this.state.focusedLocation} />;
    }
    return (
      <View style={{}}>
        <KeyboardAvoidingView behavior="padding" enabled>
          <ScrollView>
            <TouchableOpacity
              onPress={() => {
                this._onPress_QrScan();
              }}
              activeOpacity={3}
            >
              <Text style={styles.viewDetails}>Scan QR</Text>
            </TouchableOpacity>
            {QrPress ? (
              <React.Fragment>{this.renderBarcodeReader()}</React.Fragment>
            ) : (
              null
            )}
          </ScrollView>
        </KeyboardAvoidingView>
      </View>
    );
  }
}

const DEVICE_WIDTH = Dimensions.get("window").width;
const DEVICE_HEIGHT = Dimensions.get("window").height;

const styles = StyleSheet.create({
  container: {
    top: 0,
    flex: 3
  },
  map: {
    flex: 1,
    height: 130
  },
  homeHeader: {
    flexDirection: "column",
    flex: 1
  },
  homeHeaderImage: {
    flexDirection: "row"
  },
  homeHederText: {
    fontSize: 18,
    fontWeight: "bold",
    fontStyle: "normal",
    fontFamily: "sans-serif",
    letterSpacing: 0.81,
    color: "#000104",
    marginTop: "2%",
    marginLeft: "40%",
    marginRight: "3%"
  },
  hederContentContainer: {
    flexDirection: "row",
    marginTop: "30%",
    marginBottom: "10%"
  },
  qrCodeGeneraterContainer: {
    alignItems: "center",
    justifyContent: "center"
  },

});


export default Home;

但是当我在Android手机上使用expo客户端打开应用程序时。它没有渲染条形码阅读器。这表示它没有打开相机来扫描QR。它仅显示空白的白色背景。我做了很多尝试以找出解决该问题的方法。不幸的是，我对此问题无能为力。有人可以帮我解决这个问题吗？谢谢。

Answer 1

您的组件中有很多问题。请根据您的要求使用以下代码并更新样式等。

import React, { Component } from "react";

import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  TextInput,
  ScrollView,
  KeyboardAvoidingView,
  Dimensions,
  Button,
} from "react-native";
import MapView from 'react-native-maps';

import * as Permissions from "expo-permissions";

import { BarCodeScanner } from "expo-barcode-scanner";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      QrPress: false,
      hasCameraPermission: null, 
    };
  }

  componentDidMount() {
    this.getPermissionsAsync(); 
  }

  getPermissionsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === "granted" });
  };

  _onPress_QrScan = () => {
    this.setState({
      QrPress: true
    });
  }

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({ QrPress: false, scanned: true, lastScannedUrl: data });
  };

  renderBarcodeReader = () => {
    const { hasCameraPermission, scanned } = this.state;

    if (hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    }
    return (
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          justifyContent: "flex-end",
        }}
      >
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
          style={{ flex:1, ...StyleSheet.absoluteFillObject}}
        />

        {scanned && (
          <Button
            title={"Tap to Scan Again"}
            onPress={() => this.setState({ scanned: false })}
          />
        )}
      </View>
    );
  }

  render() {
    const { hasCameraPermission, scanned, QrPress } = this.state;
    let marker = null;

    if (this.state.locationChosen) {
      marker = <MapView.Marker coordinate={this.state.focusedLocation} />;
    }
    return (
      <View style={{flex:1}}>
        <KeyboardAvoidingView behavior="padding" enabled style={{flex:1}}> 
          <ScrollView contentContainerStyle={{flexGrow: 1}} >
            {QrPress ? (
              <View style={{flex:1}}>
                {this.renderBarcodeReader()}
              </View>
            ) : (
                <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
               <TouchableOpacity
              onPress={this._onPress_QrScan}
              activeOpacity={3}
            >
              <Text style={styles.viewDetails}>Scan QR</Text>
            </TouchableOpacity>
             </View>
            )}
          </ScrollView>
        </KeyboardAvoidingView>
      </View>
    );
  }
}

const DEVICE_WIDTH = Dimensions.get("window").width;
const DEVICE_HEIGHT = Dimensions.get("window").height;

const styles = StyleSheet.create({
  container: {
    top: 0,
    flex: 3
  },
  map: {
    flex: 1,
    height: 130
  },
  homeHeader: {
    flexDirection: "column",
    flex: 1
  },
  homeHeaderImage: {
    flexDirection: "row"
  },
  homeHederText: {
    fontSize: 18,
    fontWeight: "bold",
    fontStyle: "normal",
    fontFamily: "sans-serif",
    letterSpacing: 0.81,
    color: "#000104",
    marginTop: "2%",
    marginLeft: "40%",
    marginRight: "3%"
  },
  hederContentContainer: {
    flexDirection: "row",
    marginTop: "30%",
    marginBottom: "10%"
  },
  qrCodeGeneraterContainer: {
    alignItems: "center",
    justifyContent: "center"
  },

});


export default Home;