React Native连接Wi-Fi成功但无法使用网络问题求助

针对你遇到的连接Wi-Fi成功但无法访问互联网的问题，以下是几个针对性的解决步骤：

1. 补充Android必要的网络权限 #

在AndroidManifest.xml中添加以下权限，确保应用能正常访问网络并管理Wi-Fi连接：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!-- Android 12+ 额外需要的权限 -->
<uses-permission android:name="android.permission.NEARBY_WIFI_DEVICES" />

2. 修正Wi-Fi连接参数与状态校验 #

你当前调用的connectToProtectedSSID参数可能存在逻辑问题，调整后增加连接状态的确认：

const connectToWifi = async (ssid, password) => {
  try {
    if (!validatePassword(password)) {
      console.error('Invalid password');
      return;
    }

    setConnectingSSID(ssid);
    // 调整第四个参数为false，避免强制保留网络导致的冲突
    const isConnected = await WifiManager.connectToProtectedSSID(ssid, password, false, false);
    
    if (isConnected) {
      // 校验当前实际连接的SSID是否匹配目标网络
      const currentSSID = await WifiManager.getCurrentWifiSSID();
      if (currentSSID.trim() === `"${ssid}"` || currentSSID.trim() === ssid) {
        console.log('Successfully connected to Wi-Fi:', ssid);
        // 缩短延迟时间，减少不必要的等待
        setTimeout(() => checkInternetConnectivity(ssid), 2000);
      } else {
        console.error('Connected to wrong Wi-Fi network');
      }
    } else {
      console.error('Wi-Fi connection failed: returned false');
    }
  } catch (error) {
    console.error('Error connecting to Wi-Fi:', error);
  } finally {
    setConnectingSSID('');
    setSelectedSSID('');
    setPasswordModalVisible(false);
  }
};

3. 优化互联网连通性检查逻辑 #

替换检查域名（避免地区访问限制）并添加超时控制：

const checkInternetConnectivity = async ssid => {
  try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);
    
    // 使用更通用的IP查询接口做连通性校验
    const response = await fetch('https://api.ipify.org?format=json', {
      method: 'GET',
      signal: controller.signal
    });

    clearTimeout(timeoutId);
    
    if (response.ok) {
      console.log('Internet connection available');
      showToast('Wi-Fi connected with internet access!');
    } else {
      console.error('Wi-Fi connected but no internet');
      showToast('Wi-Fi connected but no internet access');
    }
  } catch (error) {
    if (error.name === 'AbortError') {
      console.error('Connectivity check timed out');
      showToast('Connectivity check timed out');
    } else {
      console.error('Error checking internet:', error);
      showToast('Failed to verify internet connection');
    }
  }
};

4. 处理Android 10+网络切换限制 #

Android 10及以上版本对应用切换网络有额外限制，连接成功后强制刷新网络：

// 在connectToWifi函数的isConnected判断内添加（仅Android）
if (Platform.OS === 'android') {
  await WifiManager.reassociate();
  await WifiManager.reconnect();
}

5. 排查Wi-Fi网络本身问题 #

• 用其他设备测试目标Wi-Fi是否能正常访问互联网
• 检查是否需要网页认证（Captive Portal），这种情况需引导用户打开浏览器完成验证
• 确认Wi-Fi的DNS设置正常，必要时可通过react-native-wifi-reborn的API手动设置DNS

6. 完善权限校验逻辑 #

在checkWifiPermissions中补充检查所有必要权限：

const checkWifiPermissions = async () => {
  try {
    if (Platform.OS === 'android') {
      const requiredPermissions = [
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        PermissionsAndroid.PERMISSIONS.ACCESS_WIFI_STATE,
        PermissionsAndroid.PERMISSIONS.CHANGE_WIFI_STATE,
        PermissionsAndroid.PERMISSIONS.INTERNET
      ];
      
      const permissionResults = await PermissionsAndroid.requestMultiple(requiredPermissions);
      
      const allGranted = requiredPermissions.every(perm => 
        permissionResults[perm] === PermissionsAndroid.RESULTS.GRANTED
      );
      
      if (allGranted) {
        scanWifi();
      } else {
        console.error('Some required permissions are denied');
      }
    } 
    // iOS权限校验部分保持不变
  } catch (error) {
    console.error('Error checking permissions:', error);
  }
};

按上述步骤逐一调整排查，即可解决连接Wi-Fi后无法访问互联网的问题。

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