从Expo应用程序调用本地托管的服务器

您可以在运行时获得IP地址：

：

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`;

这将在开发模式下以及您在生产中使用的任何地址设置api常数为您本地开发机的地址。请注意，通过App Store/Play商店部署的应用似乎具有Packageropts undefined。这就是为什么我们还有其他typeof条件。在这种情况下，我们假设它的生产构建。

更多关于清单的更多信息：https：//docs.expo.io/versions/latest/workflow/how-expo-works/#expo-development-serverment-serverd/p>

import Constants from "expo-constants";
const { manifest } = Constants;
const uri = `http://${manifest.debuggerHost.split(':').shift()}:4000`;

您应该用计算机的IP地址替换http://localhost:3000/地址。

在Windows上，打开一个提示符并键入ipconfig，检查网络接口的线路并获取地址IPv4，看起来应该像192.168.1.20。然后，您可以使用fetch和一个URL拨打电话，看起来像htt://192.168.1.20/routname。

顺便说一句，您的计算机（服务器）和设备必须在同一本地网络上。wifi和lan共享同一网络。

在当前版本的Expo中添加到Tadeusz的答案（我现在为32.0.0），您将导入Constants而不是Expo（即使在文档中将常数称为Expo.Constants.manifest），因此看起来像

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

此外，用协议准备生成的地址似乎是必须使其正常工作的必要找不到我发现的任何解决方案（包括此页面上的所有解决方案）。我花了几天的时间尝试。最后，我只是通过使用localtunnel并将其在localhost:8080上运行的服务揭露到Web上，就放弃并解决了整个问题。从我的博览会应用程序调用它时首先尝试。也许不是最伟大的长期解决方案，但也不是那么糟糕。我希望这对别人有帮助！

使用 debuggerhost 解决方案在设置EAS之后停止为我工作，所以我开始执行相反：

const uri = Constants?.expoConfig?.hostUri
  ? Constants.expoConfig.hostUri.split(`:`).shift().concat(`:8080`)
  : `yourapi.com`;

如果您使用ts，则出于某种原因 hosturi 未键入，而是存在。解决方案对我有用。但是我的格式有所不同。

我还使用document对象添加了对React-Native-Web的支持。

import Constants from "expo-constants";
//const inProduction = manifest.packagerOpts == null;
const inProduction = process.env.NODE_ENV === 'production';
const inExpo = Constants.manifest && Constants.manifest.debuggerHost;
const inBrowser = typeof document !== 'undefined';
export const apiDomain =
    inProduction ? 'mywebsite.com'
  : inExpo ? Constants.manifest.debuggerHost!.split(`:`).shift()
  : inBrowser ? document.location.hostname
  : 'unknown';
console.log('apiDomain:', apiDomain);
const protocol = inProduction ? 'https' : 'http';
const apiUrl = `${protocol}://${apiDomain}/...`;

彼此之间的简单方法。首先，您需要在移动热点上，然后使用移动热点连接到笔记本电脑。然后检查您的IP分配到计算机，然后替换API URL http：//localhost：80/地址http：//192.168.5.43：80/在您使用的React-Native源中。

将端口80替换为API服务器端口号

确保您在笔记本电脑的防火墙中有打开的服务器端口（80）。

在Android REST-CLIENT中测试API https://play.google.com/store/apps/details?id=com.sn.restandroid应用程序（url：http：//192.168.5.43:80/api）

我尝试了一些，但它不起作用，最后简单地使用ngrok

快速简便的解决方案直接起作用！

localtunnel文档

1. 在全球安装LocalTunnel（需要Nodejs）以使其在任何地方都可以访问：

npm install -g localtunnel

2. 在某些本地端口（例如http：//localhost：8000）上启动Web服务器，并使用命令行接口向您的本地服务器请求隧道：

lt --port 8000

3. 您将收到一个URL，例如https://gqgh.localtunnel.me，只要您的本地实例保持活跃，您就可以与任何人共享。所有请求将被路由到您的本地服务，处于指定的端口。

与iOS物理设备上的react-native应用程序一起使用，该应用程序与计算机分开运行，但正在调用Localhost API：

您的API调用可能看起来像这样：http://localhost:3000/api/user/login

在Windows上，打开您的命令提示符（按键盘上的Windows键，键入cmd，按Enter；这应该打开它），然后在命令提示符中输入ipconfig，然后按Enter。

。

这应该为您提供大量数据列表。向下滚动直到看到此字段：IPv4 Address.....。从右侧拿起它的价值（类似：192.168.1.33）。

接下来，将此号码插入您的API调用中：http://192.168.1.33:3000/api/user/login

确保您和您的设备都使用相同的WiFi网络。现在应该起作用。

摘要：

旧的API调用：http://localhost:3000/api/user/login

新的API调用：http://192.168.1.33:3000/api/user/login

如何从Divyanshu Singh的详细信息中解释了如何从Expo调用本地托管的服务器，并使用一些解决方案来说明：

• 使用ngrok或localtunnel
• 通过在0.0.0.0上运行服务器（ this解决方案为我工作）

https://dsinecos.github.io/blog/how-to-call-a-locally-host-host-server-server-from-expo-app-app

不知道为什么，但是此特定的 IP地址与Android模拟器有点相关。我尝试了上述解决方案（机器的私有IPv4），但这也无效。因此，如果某人在Android模拟器内开发，则可以使用此 IP地址。

http://10.0.2.2

不要忘记添加端口 localhost server。=" ANS">

在我的项目中，我通常会通过配置获得本地开发服务器，因此我对 @tiagob的答案进行了调整，以修补localhost地址：

let uri = Config.host;
if (uri.includes('localhost') && manifest.debuggerHost)
  uri = uri.replace(
    'localhost',
    manifest.debuggerHost.split(':').shift()
  );

在生产中，配置将不包括 localhost，因此此代码只会返回未修改的配置变量。

[除上述]使用Laravel Artisan服务，将计算机IP作为主机参数传递：

php artisan serve --host 192.168.0.19 --port 8000