web-dev-qa-db-fra.com

Réaction de la récupération Android native échouant lors de la connexion à l'API locale

J'utilise l'API de récupération dans mon application Android native pour réagir à une API locale. J'ai l'habitude d'interroger ladite API à partir d'applications web réactives à http: // localhost: 8163 . 

Je teste mon application sur mon périphérique physique en mode débogage. J'ai lu quelque part que react-native ne peut pas interroger localhost de la même manière qu'une application Web. Apparemment, vous devez utiliser http://10.0.2.2:[PORT_NUMBER_HERE]/, qui est un alias pour ` http://127.0.0.1:[PORT_NUMBER_HERE] en fonction des docks de l'émulateur Android. Je ne sais pas si c'est ce que je suis censé faire pour effectuer des tests sur un périphérique physique. 

Mon code de récupération ressemble à ceci:

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 demande est toujours suspendue pendant un certain temps puis atteint le bloc catch avec l'erreur inutile TypeError: Network request failed(...). En vérifiant les journaux pour mon API locale, ils n'enregistrent pas la demande du tout.

Je ne sais donc pas si j'interroge correctement mon API locale pour obtenir la ressource que je veux, et si je le suis, je ne sais pas pourquoi l'extraction échoue.

androidreact-native
25
seanchen1991

Vous ne pouvez pas accéder à votre serveur de développement local car ce port n'a pas encore été transféré par ADB. Lorsque vous exécutez react-native run-Android, React Native mappe le port 8081 avec votre périphérique mobile sur USB. Lorsque vous déconnectez votre clé USB, vous ne pourrez plus actualiser ou recharger à chaud votre code. Donc, dans cette situation, vous pouvez faire deux choses: mapper le port de votre serveur local comme le fait React Native ou utiliser votre adresse IP locale.

  1. Port de cartographie

    Cela ne fonctionne que si vous utilisez Android 6.0+. Pour transférer un port à l'aide d'ADB, exécutez la commande suivante dans votre terminal:

    adb reverse tcp:8163 tcp:8163

    Cela mappera votre port 8163 local sur le port 8163 du mobile. Vous pourrez accéder à votre serveur de développement de cette façon.

  2. Utilisation de l'adresse IP locale

    Vous pouvez également utiliser votre application de développement IP native sur React Native pour les recharger sans clé USB. Secouez votre appareil ou appuyez longuement sur le bouton du menu pour ouvrir le menu du développeur. Ouvrez Dev Settings, puis tapez sur Debug server Host & port for device. Ici, vous pouvez entrer l'adresse IP locale de votre machine avec le numéro de port 8081. Par ex. Si l'adresse IP de votre machine est 192.168.1.100, vous devez saisir 192.168.1.100:8081 ici pour une connexion réussie. Maintenant, nous avons couvert le fait que nous pouvons recharger l'application. Ensuite, lorsque vous souhaitez utiliser le serveur de développement de votre ordinateur local, utilisez la même adresse IP que le numéro de port de votre serveur. 

Vous devriez être bon pour aller avec cela.

39
Jagjot Singh

Avait le même problème/similaire - m'a pris deux jours complets pour le résoudre. J'utilise une machine Win10 avec Visual Studio Code, un périphérique Android connecté et un serveur local PHP pour l'API. Peut-être que cela aidera quelqu'un: 

  1. Câble -> Essayez différents câbles USB, sur mes 3 câbles, un seul fonctionne
  2. Mode de connexion -> Très important, je devais choisir le mode PTP pour que cela fonctionne
  3. Même réseau -> Le téléphone et le PC doivent être sur le même réseau
  4. Réseau privé -> Le réseau doit être un réseau privé, le public ne fonctionne pas
  5. IP -> Exécuter ipconfig dans PowerShell et obtenir votre adresse IP4
  6. Pare-feu -> Acceptez l'invite du pare-feu
  7. Serveur PHP -> Démarrer le serveur PHP intégré avec "php -S {votre IP}: 8081"
  8. Testez le serveur PHP -> Créez index.php et ouvrez {votre IP}: 8081 sur votre téléphone
  9. Récupérer -> Créer un script de récupération (exemple ci-dessous)

       fetch('http://{your IP}:8081/')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({ message : responseJson.message.data })
        })
      .catch((error) => {
        console.error(error);
      });

0
Peter