Problème avec le scan des code barres en react js

Ronaldo
Javascript React

Décrivez ici votre problème ou ce que vous cherchez à faire.
J'aimerais savoir s'il existe une librairie capable de scanner les codebares en react js. J'ai essayé react-barcode-reader mais cela m'affiche une erreur

Entourez votre code en utilisant "```" pour bien le mettre en forme. (ne copiez pas trop de code)

Ce que je veux

Décrivez ce que vous cherchez à obtenir.

Ce que j'obtiens

Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

3 réponses

vifen

Bonjour, tu as toujours ce probléme ou est ce que c'est réglé ?

Mini Militia App Lock

ToinouPHP

Bonjour, si ça t'affiche une erreur, c'est qu'il y a moyen de la régler.
Alors... Quelle était l'erreur ?

newcomers

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;
this is the code i get
And also check out the newcomers online store which sells baby products, baby sleep products, etc
Baby Pillows & Bolstershttps://newcomers.in/collections/newborn-baby-pillow-online-india
Baby Bedding Sethttps://newcomers.in/collections/new-born-baby-bed-set-cotton-online-india