Блог

Я создал экран, на котором пользователь должен сканировать QR-код, прежде чем ему покажут несколько кнопок. Эта функция отлично работает в среде разработки, однако, когда я создал файл APK и попытался отсканировать QR-код, внезапно приложение вышло из строя и перезапустилось.

Из того, что я прочитал до сих пор, я думаю, что проблема может быть связана с асинхронной функцией, которая не позволяет запускать функцию обработчика qrscanned. но я могу ошибаться и стараюсь не нарушать код. Я хотел бы спросить, может ли кто-нибудь из вас указать, где мне следует измениться, чтобы решить проблему. Ниже приведен код для экрана.

 import React, { useState, useEffect, useContext } from 'react';
import { Text, View, StyleSheet, Button, ImageBackground, Picker, Alert, ScrollView, FlatList } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { Card } from 'react-native-paper';
import {AuthContext} from '../components/context';

const  ScannerScreen = ({navigation}) => {

  const { employeeNameDetails } = useContext(AuthContext);
  var username = employeeNameDetails();

  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const [data, setData] = useState('Scan QR Code');
  const [itemData, setItemData] = useState([]);
  const [room, setRoom] = useState('');
  const [roomName, setRoomName] = useState([]);
  const [bilik, setBilik] = useState(false);

  const updateRoom = () =>{
    if(room != 'PILIH BILIK'){
      var updateAPI = "https://example.com/api/setroom.php"
      var header ={
        'Accept': 'application/json',
        'Content-type': 'application/json'
      };
      var itemdata ={
        roomName: room,
        asetID: data
      };
      fetch(
        updateAPI,
        {
          method: 'POST',
          headers: header,
          body: JSON.stringify(itemdata)
        }
      )
      .then((response)=>response.json())
      .then((response)=>
            {
                if (response[0].isCorrect ==1){       
                    Alert.alert(
                        "Berjaya","Bilik telah ditetapkan"
                    )}
                else{
                    Alert.alert(
                        "Error","Tiada maklumat item dalam database"
                    )
                }
            }
                )
            .catch((error)=>{
                alert("Error"   error);
            })
  }else{
    Alert.alert(
      "Error!","Sila pilih bilik."
    )
  }}

  useEffect(() => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  const handleBarCodeScanned = ({ data }) => {
    setScanned(true);
    setData(data);
    var searchAPI = "https://example.com/api/searchitembyid.php";
        var header = {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        };
        var itemdata = {
          itemid: data
        };
        fetch(
          searchAPI,
          {
            method: 'POST',
            headers: header,
            body: JSON.stringify(itemdata)
          }
        )
        .then((response)=>response.json())
        .then((responseJSON)=>{
          setItemData(responseJSON)
        });
    var roomAPI = "https://example.com/api/getroom.php";
        var roomheader = {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        };
        var roomdata = {
          username: username
        };
        fetch(
          roomAPI,
          {
            method: 'POST',
            headers: roomheader,
            body: JSON.stringify(roomdata)
          }
        )
        .then((response)=>response.json())
        .then((responseJSON)=>{
          setRoomName(responseJSON)
        });
  };

  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  const _renderItem = ({item, index}) =>{
    return(
        <View>
        <Text style={styles.trackingNo}>{item.itemname}</Text>
        <Text style={styles.trackingNo}>{item.nosiri}</Text>
        </View>
    )
  }

  return (
    <ImageBackground
      source={require('../assets/background-image.jpg')}
      style={styles.image}>
    <ScrollView style={styles.container}>
      <View style={styles.top}>
        <Text style={styles.title}>Scan Item</Text>
      </View>
      <View style={styles.barcodeSection}>
      <Card>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={styles.barcode}
      /></Card>
      </View>
      
      <View style={styles.bottomSection}>
        <Card>
      {scanned amp;amp;
      <Button color="#fbf32f" title={'Scan Again'} onPress={() => {setScanned(false); setData('Scan QR Code')}} />}
      {scanned amp;amp;
      <View>
      <FlatList
          data={itemData}
          renderItem={_renderItem}
          keyExtractor={(item,index)=> index.toString()}
          />
      <Text style={styles.btnText}>Set Room</Text>
      <Picker
        selectedValue={room}
        style={styles.pickerInput}
        onValueChange={(itemValue, itemIndex) => setRoom(itemValue)}>
        {roomName.map((item, index) => {
        return (< Picker.Item label={item.roomname} value={item.roomname} key={index} />);
        })}
      </Picker></View>
      }
      {scanned amp;amp; <TouchableOpacity
      style={styles.btn}
      onPress={updateRoom}
      ><Text style={styles.btnText}>Tetapkan Bilik</Text></TouchableOpacity>
      }
      </Card></View>
    </ScrollView></ImageBackground>
  );
}
export default ScannerScreen;
 

Любое предложение или решение будет высоко оценено. Спасибо, ребята.