web-dev-qa-db-fra.com

Appeler un serveur hébergé localement depuis l'application Expo

Je crée une application native native et l'un des composants que j'ai créés contient une propriété qui est remplie par des données provenant d'une demande http.

En ce moment, j'héberge le serveur depuis mon ordinateur portable, mais je teste l'application sur mon téléphone à l'aide de l'application Expo. Étant donné qu'il s'agit de deux périphériques distincts, les appels http: // localhost: 30 ne fonctionnent pas et je ne peux donc pas dire si mon composant fonctionne correctement.

Existe-t-il un moyen pour moi d'exécuter le serveur sur mon ordinateur portable et de le configurer pour que les requêtes http depuis l'application Expo atteignent le serveur?

react-nativeaxiosexpo
18
iSeeJay

Vous pouvez obtenir l'adresse IP lors de l'exécution à l'aide du manifeste Expo:

import Constants from "expo-constants";
const { manifest } = Constants;

const api = (typeof manifest.packagerOpts === `object`) && manifest.packagerOpts.dev
  ? manifest.debuggerHost.split(`:`).shift().concat(`:3000`)
  : `api.example.com`;

Cela définira api constant à l'adresse de votre machine de développement locale en mode développement et à l'adresse que vous utilisez en production. Notez que les applications déployées via l'App Store/Play Store semblent avoir packagerOpts undefined. C'est pourquoi nous avons une condition typeof supplémentaire. Dans ce cas, nous supposons qu'il s'agit d'un build de production.

Plus d'informations sur le manifeste ici: https://docs.expo.io/versions/latest/workflow/how-expo-works/#expo-development-server

27
Tad Lispy
import Constants from "expo-constants";

const { manifest } = Constants;

const uri = `http://${manifest.debuggerHost.split(':').shift()}:4000`;
12
tiagob

Pour ajouter à réponse de Tadeusz , dans la version actuelle d'Expo (je suis actuellement sur 32.0.0), vous importeriez Constants plutôt que Expo (même bien que les constantes soient référencées dans les documents comme Expo.Constants.manifest), il ressemblerait donc à

import { Constants } from 'expo';
const { manifest } = Constants;

De plus, l'ajout de l'adresse générée au protocole semble indispensable pour que tout fonctionne.

5
Alex Boklin

Vous devez remplacer le http://localhost:3000/ adresse avec l'adresse IP de votre ordinateur.

Sous Windows, ouvrez une invite et tapez ipconfig, vérifiez la ligne de votre interface réseau et obtenez l'adresse IPV4, devrait ressembler à 192.168.1.20. Ensuite, vous pouvez passer vos appels avec fetch et une URL ressemblant à htt://192.168.1.20/routname.

Soit dit en passant, votre ordinateur (serveur) et votre appareil doivent être sur le même réseau local. Wifi et LAN partagent le même réseau.

3
Poptocrack

Pour la vie de moi, je n'ai pu trouver aucune solution que j'ai trouvée (y compris toutes celles sur cette page) pour fonctionner. J'ai passé quelques jours à essayer. Enfin, je viens d'abandonner et de contourner tout ce problème en utilisant localtunnel et en exposant mon service s'exécutant sur localhost:8080 sur le Web. A d'abord essayé lors de l'appel depuis mon application expo. Peut-être pas la meilleure solution à long terme, mais pas si mal non plus. J'espère que ça aidera quelqu'un d'autre!

1
Forrest

Un autre moyen facile. Vous devez d'abord vous connecter à Mobile HotSpot et vous connecter à un ordinateur portable à l'aide de Mobile HotSpot. Vérifiez ensuite que vous attribuez l'IP à votre ordinateur et remplacez l'URL api http: // localhost: 80 / adresse à http://192.168.5.43:80/ dans react-native source où vous utilisez.

Remplacez le port 80 par le port no de votre serveur api.

Assurez-vous que le port du serveur est ouvert (80) dans le pare-feu de l'ordinateur portable.

Testez l'API dans Android rest-client https://play.google.com/store/apps/details?id=com.sn.restandroidapp (url: http://192.168.5.43:80/api )

0
Birbal Singh