React Native Webview加载HTML异常求助：无限加载+按钮无响应

嘿，我之前也踩过类似的WebView加载坑，结合你提到的错误码-999、无限加载和按钮没反应的情况，咱们一步步来排查解决：

先搞清楚Error Code -999是什么 #

这个错误本质是请求被主动取消，大多是WebView内部的资源加载、页面跳转被拦截或者失败后触发了重试循环，进而导致无限加载的现象。

具体解决方案 #

1. 检查HTML资源路径是否正确 #

如果你的HTML里用了相对路径引用CSS/JS/图片，WebView可能找不到这些资源，触发加载失败后重试，形成无限循环。

• 修复方案：
  • 把所有资源改成绝对路径；
  • 或者将整个HTML（包括内嵌的CSS/JS）转成Base64字符串加载，避免路径问题：

    import { WebView } from 'react-native-webview';
    
    // 把你的HTML内容转成Base64
    const encodedHtml = btoa(`<!DOCTYPE html>
    <html>
    <head>
      <style>/* 内嵌CSS样式 */</style>
    </head>
    <body>
      <form>
        <!-- 你的表单内容 -->
        <button type="button">提交</button>
      </form>
      <script>/* 内嵌JS逻辑 */</script>
    </body>
    </html>`);
    
    // 在组件中使用
    <WebView
      source={{ uri: `data:text/html;base64,${encodedHtml}` }}
      onLoadStart={() => console.log('开始加载')}
      onLoadEnd={() => console.log('加载结束')}
    />
    

2. 开启JavaScript支持 #

WebView默认可能没开启JavaScript，导致表单按钮的点击逻辑无法执行，同时JS加载失败也可能触发加载重试。

• 修复方案：
  在WebView组件中开启javaScriptEnabled和domStorageEnabled（如果用到本地存储的话）：

  <WebView
    source={{ uri: '你的HTML地址' }}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    onLoadStart={() => console.log('开始加载')}
    onLoadEnd={() => console.log('加载结束')}
  />
  

3. 解决跨域或安全策略限制 #

如果你的HTML加载的是本地文件（file://协议）或者跨域资源，iOS/Android的WebView安全策略会阻止请求，导致加载失败。

• Android端修复：
  在AndroidManifest.xml中给对应Activity添加android:usesCleartextTraffic="true"（如果加载HTTP而非HTTPS资源），或者在原生代码中配置WebView允许跨域：

  // 原生WebView配置
  webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
  webView.getSettings().setAllowFileAccess(true);
  

• iOS端修复：
  在Info.plist中添加App Transport Security例外（注意生产环境需精细配置，避免审核问题）：

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

4. 避免表单提交导致的页面跳转循环 #

如果表单的action是空或者指向当前页面，提交后会触发页面重新加载，进而形成无限循环。

• 修复方案：
  用JavaScript处理表单提交，避免页面跳转：

  <form id="myForm">
    <input type="text" name="username" />
    <button type="button" onclick="submitForm()">提交</button>
  </form>
  
  <script>
    function submitForm() {
      const form = document.getElementById('myForm');
      const formData = new FormData(form);
      // 用Fetch发送请求，替代表单默认提交
      fetch('你的接口地址', {
        method: 'POST',
        body: formData
      })
      .then(res => res.json())
      .then(data => console.log('提交成功:', data))
      .catch(err => console.error('提交失败:', err));
    }
  </script>
  

总结 #

优先排查资源路径和JavaScript开关，这两个是最常见的问题；如果还没解决，再检查跨域策略和表单提交逻辑，应该就能搞定无限加载和按钮无反应的问题了。

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