React-Native NetInfo始终返回无网络连接及Web API调用问题咨询

咱们一步步来解决你遇到的两个React Native开发问题：

一、NetInfo始终返回无网络连接的排查方案 #

这个问题大概率是权限配置或者使用方式不对，给你几个排查方向：

• 先检查平台权限配置
  对于Android，必须在AndroidManifest.xml里添加这两个权限，不然APP没法检测网络状态：

  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.INTERNET" />
  

  要是iOS的话，得确保Info.plist里的ATS配置允许你访问的接口，比如如果是HTTP接口（不推荐生产环境用），要添加：

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
  </dict>
  

  要是HTTPS接口，确保证书没问题，不然也可能导致网络检测异常。

• 确认用对了NetInfo包
  现在React Native官方已经废弃了内置的NetInfo，推荐用@react-native-community/netinfo包，旧版本的NetInfo在新RN版本里兼容性很差。正确的使用方式参考：

  import NetInfo from '@react-native-community/netinfo';
  
  // 在组件里监听网络状态
  componentDidMount() {
    this.unsubscribeNetInfo = NetInfo.addEventListener(state => {
      console.log('当前网络类型:', state.type);
      console.log('是否联网:', state.isConnected);
    });
  }
  
  componentWillUnmount() {
    // 组件卸载时一定要取消监听，避免内存泄漏
    this.unsubscribeNetInfo();
  }
  

• 测试真实网络环境
  有时候模拟器的网络模拟会抽风，试试用真机测试，或者切换WiFi/移动数据，重启设备再看看状态是否正常。

二、react-native-web-service-handler调用API的调试方案 #

看了你贴的代码，先给你几个关键的调试点：

1. 补全完整的API地址 #

你定义的APIConstants.baseURL是"h..."，这明显是不完整的！必须是带协议（http/https）的完整接口地址，比如"https://randomuser.me/api/"，不然请求根本发不出去。

2. 规范参数传递 #

WebServiceHandler.get的三个参数分别是url、query参数、请求头，如果你的接口需要查询参数，要正确传递，比如：

getRandomUserList() {
  WebServiceHandler.get(
    APIConstants.baseURL,
    { page: 1, results: 10 }, // 这里是查询参数，不需要就传null
    { 'Content-Type': 'application/json' } // 请求头，根据接口要求设置
  )
  .then((val)=>{
    console.log('API返回结果:', JSON.stringify(val))
    this.setState({data:val})
  })
  .catch((error) => {
    // 不要只打印JSON后的error，要打印完整错误信息方便排查
    console.log('API调用错误:', error);
    console.log('错误详情:', error.message);
    console.log('响应数据:', error?.response);
  });
}

3. 确认包的安装配置正确 #

如果你是RN 0.60以下版本，安装react-native-web-service-handler后需要手动link；0.60+版本自动link，但iOS要记得执行cd ios && pod install，不然会有原生模块找不到的问题。

4. Post请求示例参考 #

之后要写Post请求的话，可以参考这个格式：

submitFormData() {
  const postData = { username: 'testUser', email: 'test@example.com' };
  WebServiceHandler.post(
    APIConstants.baseURL + '/submit',
    postData,
    { 'Content-Type': 'application/json' }
  )
  .then(res => console.log('Post成功:', res))
  .catch(err => console.error('Post失败:', err));
}

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