如何在Visual Studio Code中实现React Native与Node.js的交互？

核心排查与修复步骤 #

• 网络连通性验证

  1. 先确认 Node.js 服务正常运行，终端执行 curl http://localhost:3000（替换成你的服务端口），看是否能收到响应。
  2. React Native 端禁止用 localhost，改用电脑的局域网 IP（比如 192.168.1.105），模拟器/真机无法直接访问电脑的本地回环地址。
  3. 临时关闭电脑防火墙测试，避免端口被拦截导致无法通信。

• 跨域与端口配置

  1. Node.js 服务必须开启跨域支持，以 Express 为例，安装 cors 包后添加配置：

     const cors = require('cors');
     app.use(cors({ origin: '*' })); // 开发环境临时用*，生产环境指定具体域名
     

  2. 确保 React Native 请求的端口和 Node.js 服务端口完全一致，比如请求地址写 http://192.168.1.105:3000/api/getData。

• VSCode 项目与环境管理

  1. 用 VSCode 工作区（.code-workspace）管理子目录，把 React Native 和 Node.js 代码分别放在不同子文件夹，避免依赖冲突。
  2. 打开多终端窗口，分别启动 Node.js 服务（npm start）和 React Native 项目（npx react-native start + npx react-native run-android/ios），防止端口占用。

场景化快速修复 #

• iOS 模拟器：执行 npx react-native run-ios --simulator="iPhone 14" 重启模拟器，同时重启 Node.js 服务。
• Android 真机：确保手机和电脑在同一 WiFi 下，开启 USB 调试后执行 adb reverse tcp:3000 tcp:3000，把电脑端口映射到手机。
• 日志排查：Node.js 端看服务日志确认请求是否到达，React Native 端用 console.log 打印请求错误信息，区分是网络问题还是接口逻辑问题。

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