React Native调用本地localhost接口报Network request failed如何解决

1. 修正接口请求地址 #

React Native运行在模拟器或真机中时，localhost指向的是设备自身，而非启动后端服务的开发电脑，这是该错误最常见的诱因，根据运行场景替换为对应地址即可：

• 安卓模拟器：使用预留的主机映射地址，替换为http://10.0.2.2:8080/profile?id=1
• iOS模拟器：使用开发电脑的本地局域网IP，示例为http://192.168.xx.xx:8080/profile?id=1，将xx段替换为电脑实际IP即可
• 真机调试：保证手机和开发电脑处于同一局域网下，同样使用电脑的本地局域网IP作为接口地址

2. 适配安卓明文HTTP限制 #

安卓9（API Level 28）及以上版本默认禁止应用发起HTTP明文请求，本地接口使用的HTTP协议会被系统直接拦截，需要做如下配置：
打开安卓项目目录下的android/app/src/main/AndroidManifest.xml，在application标签中添加android:usesCleartextTraffic="true"属性，示例如下：

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:usesCleartextTraffic="true" <!-- 新增该行配置 -->
  android:theme="@style/AppTheme">

3. 其他检查项与代码优化 #

• 先在开发电脑的浏览器中访问http://localhost:8080/profile?id=1，确认后端服务正常运行且接口返回正常
• 关闭开发电脑的防火墙，或者放行8080端口的入站请求
• 当前的useEffect未添加依赖数组，会导致组件每次渲染都重复发起请求，建议添加空依赖数组让请求仅在组件挂载时执行一次，修改后代码如下：

useEffect(() => {
  fetch(URL)
    .then((response) => response.json())
    .then((json) => setData(json.data))
    .catch((error) => alert(error))
}, []) // 新增空依赖数组

• 你当前初始化的data为数组类型，若接口返回的json.data是对象类型，会导致FlatList渲染失败，同时下方的{data.name}也无法正常取值，可根据接口实际返回格式将初始值调整为useState({})。

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