在設備上運行時反應本機應用程式出錯

當我使用 web 執行程式時，我通過使用 react native 實作了一個條形碼掃描儀應用程式，所有功能都可以完美運行它可以將資料傳遞給 api 并發布到服務器但是當我嘗試在我的 android 和 iOS 設備上使用它時它不能發布下面的資料是我的scanner.js代碼

import React, { useState, useEffect,Component,onMount} from 'react';
import { Text,TextInput, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import {useNavigation} from'@react-navigation/native';
import {StatusBar} from 'expo-status-bar';





  export default function Scanner () {
  
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const [userid, setuserid] = useState('Not yet scanned')
  const [currentDate, setCurrentDate] = useState('');
  const navigation = useNavigation();


  const askForCameraPermission = () => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })()
  }

  // Request Camera Permission
  useEffect(() => {
    askForCameraPermission();
  }, []);

  useEffect(() => {
    var date = new Date().getDate(); //Current Date
    var month = new Date().getMonth()   1; //Current Month
    var year = new Date().getFullYear(); //Current Year
    var hours = new Date().getHours(); //Current Hours
    var min = new Date().getMinutes(); //Current Minutes
    var sec = new Date().getSeconds(); //Current Seconds
    setCurrentDate(
      date   '/'   month   '/'   year 
        ' '   hours   ':'   min   ':'   sec
    );
  }, []);
  // What happens when we scan the bar code

  const handleBarCodeScanned = ({ type, data }) => {

   
    setScanned(true);
     
     
     setuserid(data )
     
   
  };
 
  // Check permissions and return the screens
  if (hasPermission === null) {
    return (
      <View style={styles.container}>
        <Text>Requesting for camera permission</Text>
      </View>)
  }
  if (hasPermission === false) {
    return (
      <View style={styles.container}>
        <Text style={{ margin: 10 }}>No access to camera</Text>
        <Button title={'Allow Camera'} onPress={() => askForCameraPermission()} />
      </View>)
  }

   
   const Register = () => {

    
   
    let InsertAPIURL = "https://localhost/api/insert.php";

      let headers = {
        
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Methods': 'POST, PUT, PATCH, GET, DELETE, OPTIONS',

        'Access-Control-Allow-Headers': 'Origin, X-Api-Key, X-Requested-With, Content-Type, Accept, Authorization',
      }
      let Data = {
        userid:userid,
        
      };

      fetch(InsertAPIURL, {
        mode:'no-cors',
        method: 'POST',
        headers: headers,
        body: JSON.stringify(Data)
      })
      try{
        ((response) =>response.json()),
      ((response)=>{
        alert(response[0].Message);
      })
      }
      
      catch{
        ((error) => {
        alert("Error" error);
      })
    } }

  // Return the View
  return (
     
    <View style={styles.container}>
      <View style={styles.barcodebox}>
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
          style={{ height: 400, width: 400 }} />
      </View>
      
      <Text style={styles.maintext}>{userid   '\n' currentDate}
    
      </Text>

      
      {
        scanned && <Button title={'Scan again?'} onPress={() => setScanned(false)} color='tomato' />
         
      }
     
      {
         scanned && <Button title={'OK'} onPress={()=> navigation.navigate('Home',{userid},Register())} />
         
      }
    </View>
  );
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  maintext: {
    fontSize: 16,
    margin: 20,
  },
  barcodebox: {
    alignItems: 'center',
    justifyContent: 'center',
    height: 300,
    width: 300,
    overflow: 'hidden',
    borderRadius: 30,
    backgroundColor: 'tomato'
  }
});

我對其他來源進行了研究，他們說將 apiurl 更改為http://10.0.2.2而不是 localhost 主機以使其在 android 設備上運行，但是在我嘗試了這種方法之后它也無法解決問題。這是我的第一個反應原生專案，我真的堅持了幾天已經希望你們幫助提前謝謝

uj5u.com熱心網友回復：

您需要提供您的 ip 地址而不是localhost，您可以通過ifconfig在 linux/Mac 和ipconfigwindows 上找到它。

所以你有這樣的東西：192.0.0.1:3000/yoururl而不是localhost:3000/yoururl

僅當您想在連接到計算機的真實設備上進行測驗時才需要這樣做。

標籤：安卓 IOS 反应 反应式

上一篇：以編程方式垂直UIScrollView

下一篇：如何在SwiftUI中向上移動水平堆疊