React Native Android Recupero non riuscito sulla connessione all'API locale

Question

Sto utilizzando l'API di recupero nella mia app Android nativa per effettuare richieste a un'API locale. Di solito chiedo a detta API di rispondere alle app web allo http://localhost:8163.

Sto testando la mia app sul mio dispositivo fisico in modalità debugger. Ho letto da qualche parte che reagiscono: nativo non può interrogare localhost nello stesso modo in cui una app web può. A quanto pare devi usare http://10.0.2.2:[PORT_NUMBER_HERE]/ che è un alias per `http://127.0.0.1:[PORT_NUMBER_HERE] secondo i dock dell'emulatore Android. Non sono sicuro se questo è quello che dovrei fare per testare su un dispositivo fisico.

Il mio prendere codice è simile al seguente:

fetchToken() { 
    fetch('http://10.0.2.2:8163/extension/auth', { 
     method: 'GET', 
     headers: { 
      'Accept': 'application/json', 
      'Content-type': 'application/json' 
     } 
    }) 
    .then((response)) => console.log('successful fetchToken response: ', response.json())) 
    .catch((error) => console.log('fetchToken error: ', error)) 
    .done(); 
} 

La richiesta pende sempre per un po 'e poi raggiunge il blocco catch con l'errore inutile TypeError: Network request failed(...). Controllando i log per la mia API locale, essi non registrano affatto la richiesta.

Quindi non ho idea se sto interrogando la mia API locale correttamente per ottenere la risorsa che voglio, e se lo sono, non so perché il recupero sta fallendo.

Answer 1

Non è possibile accedere al server di sviluppo locale perché tale porta non è stata ancora inoltrata da ADB. Quando si esegue react-native run-android, React Native mappa la porta 8081 con il dispositivo mobile su USB. Quando disconnetti la tua USB non sarai più in grado di ricaricare o ricaricare il tuo codice. Quindi in questa situazione puoi fare 2 cose, o mappare la porta del tuo server locale come fa React Native o usare il tuo indirizzo IP locale.

1. mappatura delle porte

   Questo funziona solo se si utilizza Android 6.0 e versioni successive. Per inoltrare una porta mediante ADB eseguire il seguente comando nel terminale:

   adb reverse tcp:8163 tcp:8163 
   

   Questo sarà mappare la porta locale 8163 al porto di cellulare 8163. Sarai in grado di accedere al tuo server di sviluppo in questo modo.

2. Utilizzando l'indirizzo IP locale

   È possibile anche usare il vostro IP locale su Reagire Native App sviluppo per ricaricare loro senza USB. Scuoti il ​​dispositivo o premi a lungo il pulsante menu per aprire il menu sviluppatore. Aprire Dev Settings, quindi toccare Debug server host & port for device. Qui puoi inserire l'IP locale della tua macchina con il numero di porta 8081. Per es. se l'IP della tua macchina è 192.168.1.100, inserisci qui 192.168.1.100:8081 per una connessione riuscita. Ora abbiamo spiegato che possiamo ricaricare l'app. Dopodiché, quando si desidera utilizzare il server di sviluppo della propria macchina locale, utilizzare lo stesso IP con il numero di porta del proprio server.

Si dovrebbe essere buono per andare con questo.

Answer 2

basta usare componentDidMount come questo:

componentDidMount(){ 
    return fetch('http://10.0.2.2:8163/extension/auth') 
     .then((response) => response.json()) 
     .then((responseJson) => { 

      this.setState({ 
       isLoading: false, 
       sem: responseJson 
      }); 
     }) 
     .catch((error) => { 
      console.error(error); 
     }); 
} 

per più: https://facebook.github.io/react-native/docs/network.html