React Native中WebView无法在iOS/Android打开google.com的问题排查

一、Google链接的NSURLErrorDomain Error Code: -1202问题 #

这个错误本质是iOS的App Transport Security（ATS）机制在阻止你的请求——ATS默认要求所有HTTPS请求必须使用符合安全标准的可信证书，而Google的域名在你的环境下（比如模拟器、特定网络）触发了证书验证失败，或者ATS的严格规则拦截了连接。

解决办法：

• 临时调试方案（不建议上线用）：
  在iOS项目的Info.plist文件中添加ATS全局例外（苹果审核时可能拒绝这种设置，仅用于本地调试）：

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

• 合规上线方案：
  只针对google.com添加ATS例外，这样既满足调试需求，又符合苹果的审核规范：

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSExceptionDomains</key>
      <dict>
          <key>google.com</key>
          <dict>
              <key>NSIncludesSubdomains</key>
              <true/>
              <key>NSExceptionRequiresForwardSecrecy</key>
              <false/>
          </dict>
      </dict>
  </dict>
  

二、GitHub页面CSS样式丢失问题 #

你的代码里虽然开启了javaScriptEnabled和domStorageEnabled，但还有几个关键问题可能导致样式加载异常：

原因分析：

1. 你使用的是React Native内置的旧版WebView组件，它已经被官方废弃，存在很多兼容性和功能缺失问题；
2. WebView的User-Agent设置不符合移动端网站的适配规则，导致网站没有返回移动端专属的CSS；
3. 缺少部分必要的WebView配置项，比如混合内容加载权限。

解决办法：

1. 升级到官方推荐的WebView库：
   内置WebView已被废弃，建议安装react-native-webview：

   npm install react-native-webview
   # 或者用yarn
   yarn add react-native-webview
   

   然后替换你的导入语句：

   import { WebView } from 'react-native-webview';
   

2. 配置正确的User-Agent：
   给WebView设置移动端浏览器的UA，让网站返回适配移动端的CSS：

   <WebView
     // 保留原有配置
     userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1"
   />
   

3. 补充必要的配置项：
   添加混合内容加载权限（如果网站存在HTTP资源），以及优化内容适配：

   <WebView
     automaticallyAdjustContentInsets={false}
     source={{uri: DEFAULT_URL}}
     javaScriptEnabled={true}
     domStorageEnabled={true}
     decelerationRate="normal"
     startInLoadingState={true}
     userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1"
     mixedContentMode="compatibility" // 允许加载混合HTTPS/HTTP内容
     allowsInlineMediaPlayback={true} // 可选，优化媒体内容展示
   />
   

这样调整后，应该能解决CSS样式丢失的问题，同时也能提升WebView的整体兼容性。

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