關於使用react16以上在華為手機上面顯示出現問題的解決方法

  • 2019 年 11 月 28 日
  • 筆記

項目的網站開發了一段時間了，最近也忙著華為應用市場的上架。所以關於華為的事情也是需要著手考慮一下。

問題一：使用16.8的react以及reactDOM華為自帶瀏覽器白屏

在使用react開發的項目中，所有的瀏覽器（自己用的，公司沒有測試）都能夠跑起來。但是在使用華為手機自帶的瀏覽器的時候，卻出現了一片空白的情況。

開發用到的依賴如下

"axios": "^0.18.0",  "babel-polyfill": "^6.26.0",  "core-js": "^3.3.5",  "customize-cra": "^0.5.0",  "firebase": "^6.1.0",  "i18next": "^15.1.3",  "i18next-browser-languagedetector": "^3.0.1",  "i18next-xhr-backend": "^2.0.1",  "js-cookie": "^2.2.0",  "mescroll.js": "^1.4.1",  "moment": "^2.24.0",  "node-sass": "^4.12.0",  "payment": "^2.3.0",  "prerender-spa-plugin": "^3.4.0",  "qs": "^6.7.0",  "react": "^16.8.6",  "react-app-rewired": "^2.1.3",  "react-confirm-alert": "^2.4.1",  "react-credit-cards": "^0.7.0",  "react-dom": "^16.8.6",  "react-ga": "^2.6.0",  "react-i18next": "^10.10.0",  "react-paypal-express-checkout": "^1.0.5",  "react-redux": "^7.0.3",  "react-router-dom": "^5.0.0",  "react-scripts": "3.0.1",  "react-switch": "^5.0.0",  "react-toastify": "^5.1.1",  "redux": "^4.0.1"

版本是 16.8 的react以及reactDOM。

查詢很多資料，最後得知 reactDOM 在16開始的時候就是使用的ES6的 Map 和 Set。而華為瀏覽器以及其他的一些未知瀏覽器使用的還是低版本的瀏覽器內核。

37.0.0.0.0 這可是4年輕的內核了。所以是不兼容了。

React官方給出了說明

但是使用babel-polyfill仍然無法解決

所以，這裡使用 core-js,使用如下

import 'core-js/es/map';  import 'core-js/es/set';    import React from 'react';  import ReactDOM from 'react-dom';    ReactDOM.render(    <h1>Hello, world!</h1>,    document.getElementById('root')  );

這樣就可以解決華為手機無法顯示（或者說是顯示空白的問題）。

問題二：使用fixed定位的時候沒有顯示出來

項目中有一個支付需求需要在頁面彈出支付通道選擇（信用卡，paypal等），但是設置顯示的時候出現了沒有彈出選擇介面的情況，但是實際上又確實有這個頁面（只顯示它的時候）。修的定位層級的時候也是無法顯示。最後發現，在華為等低端瀏覽器內核的手機上面同時需要設置定位的位置才可以（left:0, top:0），高版本的內核的瀏覽器沒有這個問題，我猜想是自己默認就是（left:0, top:0）了。

Tags:

VirMach 便宜 VPS