Ionic React项目中OpenLayers地图浏览器正常但Android设备不显示求助

在Ionic React项目中集成OpenLayers地图，本地浏览器运行时地图可正常查看和操作；但通过adb或Android Studio在设备上运行时，地图本身不显示却占用对应空间，且能正常看到地图上的标记。

已尝试的操作：

• 按照资料建议设置body、IonApp、IonPage、IonContent等元素为透明背景，无效
• 排除了API密钥导致的问题（参考相关资料案例，与当前情况不符）
• 怀疑WebView被隐藏，但不确定具体修复方法

相关代码 #

App.tsx #

const App: React.FC = () => (  
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path='/home' component={Home}/>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

Home.tsx #

const Home: React.FC = () => (  
  return (<IonPage>
    <IonContent>
      <MapComponent />
    </IonContent>
  </IonPage>)
);

MapComponent.tsx（已简化地图创建逻辑） #

const App: React.FC = () => (  
    const mapRef = useRef<HTMLDivElement | null>(null);
    const [map, setMap] = useState<Map | undefined>();

    useEffect(() => {
        initMap(mapRef)

        return () => {
            map?.setTarget(undefined)
            mapRef.current = null
        }
    }, [])

  function initMap(mapElement) { /* 简化后移除了地图创建逻辑 */ }

  return (
    <div ref={mapRef} style={{ width: '100%', height: '400px', border: 'black 2px solid' }}></div>

  )
);

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