React Native WebView加载HTML及外部脚本时组件无法加载问题求助

• 补全WebView基础配置
  react-native-webview的部分权限属性需要显式声明才能支持第三方脚本运行，需添加以下属性：
  javaScriptEnabled={true} 显式开启JavaScript支持
  domStorageEnabled={true} 开启DOM存储，适配依赖localStorage的第三方组件
  mixedContentMode="always" 安卓端适配，允许加载混合内容

• 补全HTML适配逻辑
  当前HTML缺少移动端视口声明、宽高样式，会导致组件渲染尺寸为0无法展示，需在HTML的head标签中添加视口配置，同时为html、body设置100%宽高：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
  html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>

• 排查脚本加载异常
  添加WebView回调监听定位问题：

1. 添加onError回调监听WebView本身的加载错误
2. 添加onConsoleMessage回调，接收HTML内的控制台日志，可在你嵌入的HTML中添加日志打印判断脚本是否加载成功，示例：

<WebView
  // 其他属性
  onConsoleMessage={(event) => console.log('WebView日志：', event.nativeEvent.message)}
/>

同时可以在HTML的script标签后添加错误监听：

<script>
  document.querySelector('script[src*="coingecko"]').addEventListener('error', () => console.log('脚本加载失败'))
  window.addEventListener('load', () => console.log('页面加载完成'))
</script>

• 适配平台特殊限制
  iOS端需要检查Info.plist中的ATS配置，确保coingecko域名未被拦截，若有全局ATS限制需添加对应域名例外；安卓端需检查网络权限是否正常申请，确认android.permission.INTERNET权限已添加。

修改后完整参考代码 #

<WebView
  javaScriptEnabled={true}
  domStorageEnabled={true}
  mixedContentMode="always"
  onConsoleMessage={(e) => console.log(e.nativeEvent.message)}
  source={{
    html: `<!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style>
          html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>
      </head>
      <body>
      <script src="https://widgets.coingecko.com/coingecko-coin-price-marquee-widget.js"></script>
      <coingecko-coin-price-marquee-widget  coin-ids="bitcoin,ethereum,eos,ripple,litecoin" currency="usd" background-color="#ffffff" locale="en">
      </coingecko-coin-price-marquee-widget>
      <script>
        document.querySelector('script[src*="coingecko"]').addEventListener('error', () => console.log('CoinGecko脚本加载失败'))
      </script>
      </body>
    </html>`,
  }}
/>

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