React Native网络重连怎么搞？手把手教你自动恢复断网连接

地铁进隧道、电梯里、咖啡馆Wi-Fi突然掉线——这些场景下，你写的React Native App是不是直接卡在空白页、按钮点不动、列表刷不出来？别急，这不是App崩了，是网络断了，而它没学会自己‘喘口气再连’。

为啥RN默认不重连？

React Native本身不内置网络状态监听和重试逻辑。fetch或axios发个请求，网络一断，就抛个error完事；组件也不主动感知“刚才还通着，现在没了”。用户得手动下拉刷新、切后台再切回来，甚至重启App——体验差得让人想卸载。

三步搞定基础重连机制

先装个轻量工具：react-native-netinfo，它能实时告诉你当前是WiFi、4G还是压根没网。

npm install @react-native-community/netinfo
yarn add @react-native-community/netinfo

iOS需额外执行：npx pod-install；Android一般开箱即用。

监听网络变化，自动重试关键请求

比如首页要拉最新资讯，可以这样写：

import NetInfo from '@react-native-community/netinfo';

const fetchNews = async () => {
  try {
    const res = await fetch('https://api.example.com/news');
    return await res.json();
  } catch (err) {
    console.warn('请求失败，等待重连...');
    throw err;
  }
};

// 组件内监听
useEffect(() => {
  const unsubscribe = NetInfo.addEventListener(state => {
    if (state.isConnected && state.isInternetReachable) {
      // 网络恢复，立刻重试上次失败的请求
      fetchNews().then(data => setNews(data));
    }
  });
  return () => unsubscribe();
}, []);

更聪明的做法：带退避策略的重试

别一恢复就猛冲接口。连续失败三次后，等1秒再试；再失败，等2秒……避免瞬间打爆服务器或触发限流。用一个简单retry函数就能搞定：

const retryWithBackoff = async (fn, maxRetries = 3) => {
  for (let i = 0; i <= maxRetries; i++) {
    try {
      return await fn();
    } catch (err) {
      if (i === maxRetries) throw err;
      await new Promise(res => setTimeout(res, Math.pow(2, i) * 1000)); // 1s, 2s, 4s
    }
  }
};

// 调用时：
retryWithBackoff(() => fetchNews()).then(setNews);

UI上也要给用户交代

别让界面干等。加个底部提示条：“网络已恢复，正在重新加载…”；或者在列表顶部放个刷新横幅，点击可手动重试。用户看得见、摸得着，焦虑感立马少一半。

真实项目中，我们还在登录、支付、表单提交等关键路径加了离线队列：网络断了先存本地，恢复后再批量发出。但这对普通上网类App来说有点重，日常优化好监听+重试+UI反馈，90%的断网体验问题就解决了。