React native react本机条码读取器工作不正常？_React Native_Expo

React native react本机条码读取器工作不正常？

react-native

React native react本机条码读取器工作不正常？,react-native,expo,React Native,Expo,问题：我已经创建了一个react本机应用程序。在那里，我使用的是世博会条形码扫描仪。这就是我的代码的组织方式 import React, { Component } from "react"; import { View, Text, StyleSheet, TouchableOpacity, Image, TextInput, ScrollView, KeyboardAvoidingView, } from "react-native"; import D

问题：

我已经创建了一个react本机应用程序。在那里，我使用的是世博会条形码扫描仪。这就是我的代码的组织方式

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;

import React，{Component}来自“React”；
进口{
看法
文本，
样式表，
可触摸不透明度，
形象,，
文本输入，
滚动视图，
键盘避免了gView，
}从“反应本族语”；
从“维度”导入维度；
从“expo Permissions”导入*作为权限；
从“expo条形码扫描仪”导入{BarCodeScanner}；
类Home扩展组件{
建造师（道具）{
超级（道具）；
此.state={
记者:错,，
hasCameraPermission:null，
};
}
componentDidMount（）{
this.getPermissionsAsync（）；
}
getPermissionsAsync=async（）=>{
const{status}=wait Permissions.askAsync（Permissions.CAMERA）；
this.setState（{hasCameraPermission:status==“grated”}）；
};
_onPress_QrScan（）{
这是我的国家({
记者：是的
});
}
把手代码=（{type，data}）=>{
this.setState（{QrPress:false，scanned:true，lastScannedUrl:data}）；
};
renderBarcodeReader（）{
const{hasCameraPermission，scanned}=this.state；
if（hasCameraPermission===null）{
返回请求相机许可；
}
if（hasCameraPermission===false）{
不允许进入摄像机；
}
返回(
{scanned&&(
this.setState（{scanned:false}）
/>
)}
);
}
render（）{
const{hasCameraPermission，scanned，QrPress}=this.state；
设marker=null；
如果（此.state.locationselected）{
标记=；
}
返回(
{
这是一个；
}}
activeOpacity={3}
>
扫描QR
{QrPress(
{this.renderBarcodeReader（）}
) : (
无效的
)}
);
}
}
const DEVICE_WIDTH=尺寸.get（“窗口”）.WIDTH；
const DEVICE_HEIGHT=尺寸。获取（“窗口”）。高度；
const styles=StyleSheet.create({
容器：{
排名：0，
弹性：3
},
地图：{
弹性：1，
身高：130
},
主页头：{
flexDirection:“列”，
弹性：1
},
homeHeaderImage：{
flexDirection：“行”
},
homeHederText：{
尺码：18，
fontWeight：“粗体”，
fontStyle:“正常”，
fontFamily：“无衬线”，
字母间距：0.81，
颜色：“000104”，
玛金托普：“2%”，
保证金金额：40%，
marginRight：“3%。”
},
hederContentContainer：{
flexDirection:“行”，
玛金托普：“30%”，
marginBottom：“10%。”
},
QRCODEGenerator容器：{
对齐项目：“中心”，
为内容辩护：“中心”
},
});
导出默认主页；

但当我在android手机上用expo客户端打开应用程序时。它不会呈现条形码读取器。这意味着它没有打开摄像头扫描QR。它只显示一个空白的白色背景。为了找出这个问题的解决办法，我做了很多努力。不幸的是，我对这个问题无能为力。有人能帮我解决这个问题吗？多谢各位

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

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;

import React，{Component}来自“React”；
进口{
看法
文本，
样式表，
可触摸不透明度，
形象,，
文本输入，
滚动视图，
键盘避免了gView，
尺寸，
按钮
}从“反应本族语”；
从“react native maps”导入MapView；
从“expo Permissions”导入*作为权限；
从“expo条形码扫描仪”导入{BarCodeScanner}；
类Home扩展组件{
建造师（道具）{
超级（道具）；
此.state={
记者:错,，
hasCameraPermission:null，
};
}
componentDidMount（）{
this.getPermissionsAsync（）；
}
getPermissionsAsync=async（）=>{
const{status}=wait Permissions.askAsync（Permissions.CAMERA）；
this.setState（{hasCameraPermission:status==“grated”}）；
};
_onPress_QrScan=（）=>{
这是我的国家({
记者：是的
});
}
把手代码=（{type，data}）=>{
this.setState（{QrPress:false，scanned:true，lastScannedUrl:data}）；
};
renderBarcodeReader=（）=>{
const{hasCameraPermission，scanned}=this.state；
if（hasCameraPermission===null）{
返回请求相机许可；
}
if（hasCameraPermission===false）{
不允许进入摄像机；
}
返回(
{scanned&&(
this.setState（{scanned:false}）
/>
)}
);
}
render（）{
const{hasCameraPermission，scanned，QrPress}=this.state；
设marker=null；
如果（此.state.locationselected）{
标记=；
}
返回(
{QrPress(
{this.renderBarcodeReader（）}
) : (
扫描QR
)}
);
}
}
const DEVICE_WIDTH=尺寸.get（“窗口”）.WIDTH；
const DEVICE_HEIGHT=尺寸。获取（“窗口”）。高度；
const styles=StyleSheet.create({
容器：{
排名：0，
弹性：3
},
地图：{
弹性：1，
身高：130
},
主页头：{
flexDirection:“列”，
弹性：1
},
homeHeaderImage：{
flexDirection：“行”
},
homeHederText：{
尺码：18，
fontWeight：“粗体”，
fontStyle:“正常”，
fontFamily：“无衬线”，
字母间距：0.81，
颜色：“000104”，
玛金托普：“2%”，
保证金金额：40%，
marginRight：“3%。”
},
hederContentContainer：{
flexDirection:“行”，
玛金托普：“30%”，
marginBottom：“10%。”
},
QRCODEGenerator容器：{
对齐项目：“中心”，
为内容辩护：“中心”
},
});
导出默认主页；

在那里