You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

React Native Metro监听与模拟器服务器连接不匹配问题解决

这个问题我碰到过好几次,确实是Metro默认只监听localhost导致模拟器(尤其是不在本地环回的场景)无法连接。有两种核心解决思路,操作都很简单:

方法一:让Metro绑定到你的局域网IP(推荐)

直接修改Metro的监听配置,让它绑定到你电脑的局域网IP(也就是你提到的10.0.1.12),这样模拟器就能直接访问这个地址了:

  • 临时启动方式:启动Metro时直接指定host

    react-native start --host 10.0.1.12
    

    之后再正常执行react-native run-android即可。

  • 永久配置方式:修改项目根目录的metro.config.js,避免每次启动都要加参数
    在配置中添加server节点,指定监听的host:

    const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
    
    const customConfig = {};
    
    module.exports = mergeConfig(getDefaultConfig(__dirname), {
      server: {
        host: '10.0.1.12',
      },
    });
    

    保存后重启Metro和项目即可生效。

方法二:修改模拟器应用的连接地址

如果不想改动Metro的监听配置,也可以让模拟器应用主动指向正确的服务器地址:

  • 通过开发者菜单修改(推荐)
    1. 启动Metro和应用后,在Android模拟器中打开开发者菜单:按键盘Ctrl+M,或者执行命令adb shell input keyevent 82
    2. 选择「Change Bundle Location」选项,输入完整的bundle地址:
      http://10.0.1.12:8081/index.bundle?platform=android&dev=true&minify=false
      
      或者如果想指向电脑的localhost,可以用Android模拟器的特殊映射地址10.0.2.2(模拟器内部访问这个地址会映射到电脑的localhost),地址写成:
      http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false
      
额外小技巧:ADB反向代理

如果上面两种方法都不想用,还可以通过ADB建立端口转发,让模拟器的8081端口直接映射到电脑的8081端口:

adb reverse tcp:8081 tcp:8081

执行这个命令后,模拟器访问localhost:8081就会自动转发到电脑的Metro服务器,无需修改任何配置。不过重启模拟器后需要重新执行该命令。


注意事项

  • 确保你的电脑和模拟器处于同一局域网(比如同一个Wi-Fi)
  • 检查电脑防火墙是否允许8081端口的入站连接
  • 可以通过ipconfig(Windows)或ip addr(Mac/Linux)确认电脑的局域网IP确实是10.0.1.12

内容的提问来源于stack exchange,提问作者martins

火山引擎 最新活动