React Native Windows应用WebView加载Google Maps JS API显示空白问题排查

下面是几个大概率导致空白的原因和解决办法：

1. 本地资源路径不对 #

你HTML里写的./style.css、./index.js是网页端的相对路径，但React Native Windows的WebView加载本地文件时不认这种路径，会找不到资源导致地图初始化失败。

解决办法：

• 把HTML、JS、CSS都打包成内联内容，直接写在HTML文件里，避免路径引用：
  修改后的index.html示例：

  <!doctype html>
  <html>
    <head>
      <title>Simple Map</title>
      <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
      <style>
        #map { height: 100%; }
        html, body { height: 100%; margin: 0; padding: 0; }
      </style>
    </head>
    <body>
      <div id="map"></div>
      <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_OWN_API_KEY&callback=initMap" async defer></script>
      <script>
        function initMap() {
          new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8,
          });
        }
      </script>
    </body>
  </html>
  

• 或者把本地文件放到项目assets目录，用require加载：

  <WebView source={require('./assets/index.html')} style={{flex:1}} />
  

2. WebView没设置尺寸 #

要是WebView的宽高没设对，哪怕地图加载成功也显示不出来。

解决办法：
给WebView设置占满父容器的样式：

<WebView
  source={...}
  style={{ width: '100%', height: '100%' }}
  // 或者用flex:1，前提是父容器有明确尺寸
/>

3. API Key有问题 #

你用的是Google的示例API Key，这个Key大概率已经被限制使用了，必须换成你自己在Google Cloud控制台申请的Key，还要记得开启Maps JavaScript API权限。

4. WebView权限没开全 #

React Native WebView默认有些权限可能没开启，导致无法加载外部脚本或存储数据。

解决办法：
开启必要的属性：

<WebView
  source={...}
  style={{flex:1}}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  allowFileAccess={true}
/>

5. 异步加载的兼容性问题 #

你用的google.maps.importLibrary是较新的异步加载方式，在WebView环境里可能有执行时机的问题，换成传统的回调加载方式更稳妥，就像上面内联HTML里写的那样，直接用callback=initMap的方式触发地图初始化。

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