React Native应用中独立设备如何通过数据线连接电脑本地Metro的bundle资源

这个现象的核心是**USB端口转发（端口映射）**机制，和网络层的localhost访问没有关系，具体逻辑可以拆解为两部分：

1. 底层转发规则的自动配置 #

RN的脚手架在调试模式下会自动针对不同设备系统配置转发规则：

• 安卓设备：依赖adb工具的反向代理能力，脚手架会自动执行命令 adb reverse tcp:8081 tcp:8081
  这个命令的作用是把安卓设备本地8081端口收到的所有TCP请求，通过USB数据线直接转发到电脑本地的8081端口上，全程不需要走WIFI网络。
• iOS设备：依赖苹果官方的usbmuxd服务，Xcode编译运行调试包时，会自动通过该服务建立USB通道的TCP映射，把iOS设备本地8081端口的请求转发到电脑的Metro服务端口。

2. 对上层应用的透明性 #

端口转发的逻辑完全在系统底层实现，RN应用本身感知不到传输通道的区别：

• 你在RN设置里填写的localhost:8081，本质是请求设备自己的本地8081端口，这个请求会被adb/usbmuxd直接拦截转发到电脑端
• Metro服务默认绑定的0.0.0.0地址，指的是Metro会接收电脑所有可用网卡（包括USB虚拟出来的网卡、WIFI网卡、有线网卡）的8081端口请求，所以转发过来的请求可以正常被Metro接收处理。

简易验证方法 #

你可以手动操作验证这个逻辑：

• 插着数据线的情况下，手动执行命令删除安卓的转发规则：adb reverse --remove tcp:8081，此时设备就算插着线也无法连接Metro服务
• 执行adb reverse tcp:8081 tcp:8081重新添加规则，连接就会恢复正常

内容的提问来源于stack exchange，提问作者Yoel