使用 WSL2 运行 EXPO 时如何将手机连接到 EXPO

Say*_*Asl 17 react-native windows-subsystem-for-linux expo

每当我尝试运行expo startnpm start它的 IP 不是我的 LAN IP 而是我的 WSL2 eth0 IP,这将导致我的手机无法连接到博览会。

我已经尝试REACT_NATIVE_PACKAGER_HOSTNAME使用export命令进行设置,它也会更改与 expo 相关的浏览器中的 ip,但我认为它不会在该 ip 上运行,因为我的手机再次无法连接(我也关闭了防火墙)

对我来说,期望的是能够在我的手机上运行我的世博会代码,而无需使用将使用互联网的隧道选项。

小智 19

我遇到了这个问题,这是关于该主题的主线,所以我想我会添加一个对我有用的解决方案。

重申一下,这是运行 Expo SDK 36 和 WSL2(Ubuntu 18.04 LTS,Win 10 build 19559.1000)。

expo start 将运行(在 WSL2 中),并弹出二维码。用我的手机扫描代码会导致错误。

我找到的解决方案是转到打开的 Metro Bundler 窗口。在“连接”下,有三个选项可用:隧道、局域网和本地。expo start 默认为 LAN。这是错误似乎发生的地方。

解决方案是从 LAN 切换到 Tunnel。这会生成一个新的二维码,它允许 Expo 手机应用程序正确识别并连接到 Expo 项目。

expo start --tunnel
Run Code Online (Sandbox Code Playgroud)

我知道原来的帖子不想使用隧道选项,但对于那些可以的人来说,这是有效的。

希望这可以帮助!


Sku*_*rpi 8

要添加 Simons 的答案,这是我必须做的才能让它运行。

将传入 Windows 的请求转发到 WSL2 实例。

在您的 WSL2 中,运行ip addr(Ubuntu)。这会给你你的IP地址。寻找 eth0,可能类似于“inet 172.22.182.52”。(请注意,如果您在机器上运行多个 Expos,那么您可能需要为更多端口执行此操作)

然后,在 Windows 终端(以管理员身份)中,运行:

netsh interface portproxy add v4tov4 listenport=19000 connectport=19000 connectaddress=172.22.185.52
netsh interface portproxy add v4tov4 listenport=19001 connectport=19001 connectaddress=172.22.185.52
netsh interface portproxy add v4tov4 listenport=19002 connectport=19002 connectaddress=172.22.185.52
Run Code Online (Sandbox Code Playgroud)

允许通过 Windows 防火墙的请求

Windows 防火墙阻止了一些东西。好的。现在打开expo需要的端口。(请注意,如果您在机器上运行多个 Expos,那么您可能需要为更多端口执行此操作)

在 Windows 终端内(以管理员身份):

iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort 19000 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort 19001 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort 19002 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort 19000 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort 19001 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort 19002 -Action Allow -Protocol TCP";
Run Code Online (Sandbox Code Playgroud)

重启时 WSL2 IP 更改

我还没有尝试过这些,但这里有一些脚本可以在重新启动时自动为您更新上述内容。

(Bonus) 更新来自世博会的二维码

您需要有一个自定义环境变量,用于为 QR 代码 URL 指定不同的主机。最简单的方法是将变量添加到您运行的命令中。您的项目最好设置一个文件,您可以在其中放置这些变量。

在Windows终端,运行: ipconfig /all。在那里的某个地方,您将拥有 Windows 机器的 IP 地址。可能在无线适配器或以太网适配器下。

在您的项目中(来自 WSL2):( REACT_NATIVE_PACKAGER_HOSTNAME=<IP address to your Windows machine> yarn expo:start或任何您的命令)。


Dar*_*ryn 5

以下是我发现在 WSL2(Windows 10 20H2 上的 Ubuntu 20)中运行的移动设备和 expo 之间进行 LAN 开发的完整步骤:

\n

1. 启动时一次性:在 Windows 防火墙中打开入站 Expo 端口

\n

Windows 防火墙应打开,并且默认情况下应阻止入站尝试。
\n以下命令将打开 Expo 端口 19000\xe2\x80\x9319006,入站,但仅在您配置为“私有”的网络上(这就是部分-Profile Private):
\n (powershell 作为管理员)

\n
New-NetFireWallRule -Profile Private -DisplayName \'Expo ports for LAN development\' `\n    -Direction Inbound -LocalPort 19000-19006 -Action Allow -Protocol TCP\n
Run Code Online (Sandbox Code Playgroud)\n

(您可以使用后检查Get-NetFirewallRule |Where-Object {$_.DisplayName -Match "Expo.*"}

\n

2.指向portproxyWSL;重新运行“每次 WSL 有新的 IP 地址时”

\n

(我还不确定 WSL IP 地址多久更改一次,但我怀疑只有重新启动才会更改)

\n

我在网上看到了一些东西,包括这里的其他答案,说 portproxyconnectaddress=127.0.0.1但它对我不起作用(WSL2,Windows 10 20H2)
\n我不能说为什么其他人发现它有效,我只能说反复测试对我来说没有127.0.0.1作用,但 WSL IP 地址确实有效。

\n

因此,这里有一个可重用的命令,用于自动将连接地址设置为正确的 WSL 地址:
\n (powershell \xe2\x80\x94 只是为了以管理员身份轻松内联Trim()\xe2\x80\x94)

\n
netsh interface portproxy add v4tov4 listenport=19000 listenaddress=0.0.0.0 `\n    connectport=19000 connectaddress=$($(wsl hostname -I).Trim());\n\nnetsh interface portproxy add v4tov4 listenport=19001 listenaddress=0.0.0.0 `\n    connectport=19001 connectaddress=$($(wsl hostname -I).Trim());\n
Run Code Online (Sandbox Code Playgroud)\n

3. 将 Metro 指向您的开发机器 LAN IP 地址;在 WSL 中重新运行“每次开发主机都有一个新的 IP 地址”

\n

这可能是变化最频繁的一个。当您更改网络(例如家庭/办公室)\xe2\x80\x94 时,您的笔记本电脑本地网络 IP 肯定会更改,并且在其他时间也可能会更改。

\n

幸运的是,它也是可粘贴/可别名的:
\n WSL2 shell

\n
New-NetFireWallRule -Profile Private -DisplayName \'Expo ports for LAN development\' `\n    -Direction Inbound -LocalPort 19000-19006 -Action Allow -Protocol TCP\n
Run Code Online (Sandbox Code Playgroud)\n

(如果您的开发盒不经常更改 LAN,您可能可以在 .bashrc / .zshrc 中设置 REACT_NATIVE_PACKAGER_HOSTNAME)

\n
\n

我“希望我不必重新运行一切,并且一切都可以自动化”,
\n但同样的懒惰让我很高兴至少让命令 2 和 3 能够简单地“重新运行”并始终获得 Expo LAN 模式适用于我的 WSL2 托管的 Expo 开发模式。

\n