前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于使用react16以上在华为手机上面显示出现问题的解决方法

关于使用react16以上在华为手机上面显示出现问题的解决方法

作者头像
踏浪
发布2019-11-28 18:11:30
2.4K0
发布2019-11-28 18:11:30
举报
文章被收录于专栏:踏浪的文章踏浪的文章

项目的网站开发了一段时间了,最近也忙着华为应用市场的上架。所以关于华为的事情也是需要着手考虑一下。

问题一:使用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的 MapSet。而华为浏览器以及其他的一些未知浏览器使用的还是低版本的浏览器内核。

华为自带浏览器UA
华为自带浏览器UA

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)了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-10-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题一:使用16.8的react以及reactDOM华为自带浏览器白屏
  • 问题二:使用fixed定位的时候没有显示出来
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档