React Native WebView加载MicroStrategy仪表盘iOS真机失效求助

一、修复HTML样式语法错误 #

你的自定义HTML中，myDossier div的样式存在双引号嵌套语法错误，会导致iOS端样式解析失败，容器高度为0从而显示空白。修改如下：

<div id="myDossier" style="border: 1px solid red; height: 100vh; width: 100vw;"></div>

同时移除div标签上的height="100%" width="100%"属性，改用vh/vw单位适配移动端视口。

二、调整iOS的baseUrl配置 #

iOS WebView对本地HTML的baseUrl有严格的跨域限制，将iOS端的baseUrl设置为MicroStrategy演示站的域名，避免资源加载权限问题：

<WebView
  originWhitelist={['*']}
  source={{
    html,
    baseUrl: Platform.OS === 'android' ? 'http://localhost' : 'https://demo.microstrategy.com',
  }}
  style={styles.webview}
  javaScriptEnabled={true}
  domStorageEnabled={true} // 解决安卓端localStorage权限问题
/>

三、切换为HTTPS协议 #

iOS的App Transport Security（ATS）默认阻止非HTTPS请求，将BASE_URL改为HTTPS：

var BASE_URL = "https://demo.microstrategy.com/MicroStrategyLibrary";

如果仍有ATS相关问题，可在Info.plist中添加例外（优先推荐使用HTTPS）：

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

四、调试WebView控制台日志 #

添加日志注入，查看iOS WebView内的JS错误，定位具体问题：

<WebView
  // 其他属性
  onMessage={(event) => console.log('WebView日志:', event.nativeEvent.data)}
  injectedJavaScript={`
    console.log = function(msg) {
      window.ReactNativeWebView.postMessage(msg);
    };
    window.onerror = function(msg, source, line) {
      window.ReactNativeWebView.postMessage('错误: ' + msg + ' 位置: ' + source + ':' + line);
    };
  `}
/>

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