Calling locally hosted server from Expo App

问题:

I am creating a react-native app and one of the components I have created contains a property which is populated through data coming from an http request.

Right now I am hosting the server from my laptop, however I am testing the app on my phone using the Expo app. Since these are two separate devices, the http://localhost:3000 calls are not working and thus I can not tell whether or not my component is properly working.

Is there any way for me to run the server on my laptop and set it up so that the http requests from within the Expo app reach the server?

回答1:

You can get the IP address at runtime using the Expo manifest:

import Expo from "expo";
const { manifest } = Expo.Constants;
const api = (typeof manifest.packagerOpts === `object`) && manifest.packagerOpts.dev
  ? manifest.debuggerHost.split(`:`).shift().concat(`:3000`)
  : `api.example.com`;

This will set api constant to the address of your local development machine in development mode and to whatever address you use in production. Note that apps deployed through App Store / Play Store seems to have packagerOpts undefined. That's why we have additional typeof condition. In that case we assume it's production build.

More about the manifest here: https://docs.expo.io/versions/latest/guides/how-expo-works.html#expo-manifest

回答2:

You should replace the http://localhost:3000/ address with the ip address of your computer.

On windows, open a prompt and type ipconfig, check the line of your network interface and get the address IPV4, should look like 192.168.1.20. Then you can make your calls with fetch and an url looking like htt://192.168.1.20/routname.

By the way, your computer (server) and your device must be on the same local network. Wifi and lan shares the same network.

回答3:

One another easy way. First you need to on Mobile HotSpot and connect to laptop using Mobile HotSpot. Then check you ip assign to your computer and replace api url http://localhost:80/ address to http://192.168.5.43:80/ in react-native source where you use.

Replace port 80 to your api server port no.

Make sure you have open server port (80) in firewall in laptop.

Test api in android rest-client https://play.google.com/store/apps/details?id=com.sn.restandroid app (url : http://192.168.5.43:80/api)

回答4:

To add to Tadeusz's answer, in the current version of Expo (I'm on 32.0.0 right now), you would import Constants rather than Expo (even though the constants are referenced in the docs as Expo.Constants.manifest), so it would look like

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

Also, prepending the generated address with the protocol seems to be a must to make it all work.