反應原生條碼閱讀器工作不正常？

Question

問題：

我創建了一個反應原生應用程序。 我正在使用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 客戶端打開應用程序時。 它不會呈現條形碼閱讀器。 這意味着它沒有打開相機掃描二維碼。 它只顯示一個空白的白色背景。 我嘗試了很多來找出解決這個問題的方法。 不幸的是，我對這個問題無能為力。 有人可以幫我解決這個問題嗎？ 謝謝你。

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;