react-native-cli项目调用Axios等第三方包时白屏无响应如何解决

API 探路者

2026-9-27

排查解决步骤

第一步：确认依赖安装正确
先执行npm list axios或yarn list axios检查axios是否成功安装到项目依赖中，如果返回未找到，重新执行npm install axios或yarn add axios安装即可。

第二步：补全请求错误捕获逻辑
你当前的代码没有做异常捕获，一旦请求出错就会中断执行，自然不会触发setText更新。修改useEffect内的代码为以下结构，先定位具体错误：

useEffect(() => {
  const fetchData = async () => {
    try {
      // 注意此处要替换为实际可用的请求地址，不能保留`...`占位符
      const res = await Axios.get('替换为你的实际接口地址');
      // 先打印完整返回结果，确认数据结构是否符合预期
      console.log('接口完整返回：', res);
      setText(res.data?.result ?? '返回数据中无result字段');
    } catch (err) {
      console.error('请求报错信息：', err);
      setText(`请求失败：${err.message}`);
    }
  };
  fetchData();
}, []);

第三步：检查网络权限与配置
1. 安卓端：打开android/app/src/main/AndroidManifest.xml，确认已添加网络权限：
```
<uses-permission android:name="android.permission.INTERNET" />
```
  如果请求地址是HTTP协议，安卓9及以上版本默认禁止HTTP请求，需要额外配置网络安全策略放行，或者将接口升级为HTTPS。
2. iOS端：如果请求地址是HTTP协议，需要在Info.plist中添加ATS配置允许HTTP请求，否则请求会被系统拦截。
第四步：确认接口地址可访问
1. 如果是访问本地启动的后端接口，安卓模拟器需要将localhost替换为10.0.2.2，真机需要和后端服务在同一局域网，填写宿主机的局域网IP。
2. 可以先替换为公共测试接口测试请求是否正常，排除后端接口本身的问题。
第五步：验证返回数据结构
从控制台打印的返回结果中确认数据层级是否正确，避免出现res.data.result字段不存在的情况，比如部分接口的返回数据可能在res.data.data.result层级。