汽車H5使用ReactJs問題匯總

Q：安卓4.4webview顯示空白？

A：初步懷疑是css屬性沒有加前綴引發的兼容問題，但添加後發現也不行，通過webview調試後控制臺輸出Set is undefined，搜索後發現React依賴集合類型 Map 和 Set。所以如果要兼容低版本瀏覽器可以引入一個全局的 polyfill，例如 core-js 或 babel-polyfill。

Q：安卓低版本點擊事件不生效？

A：調試檢查發現該點擊事件中使用了for of語法，無法兼容低版本，使用map或forEach方法替換即可。

Q：使用@import導入的css文件沒有被autoprefixer自動添加前綴？

A：檢查發現部分flex和transfrom屬性沒有加兼容前綴，但項目引入了autoprefixer自動添加前綴的插件，經過對比代碼發現在scss文件中使用@import引入的文件都沒有被成功添加，通過引入postcss-import可以解決這個問題。

Q：android上line-height不居中的問題？

據分析得知原因：

1.字體大小不要使用奇數字號，帶小數點的更不要提了。也就是說被2整除的整數且不可小於12px。

2.使用rem的單位時造成（根元素如果動態改變時，根元素字體可能不是整數）。

由於網上的方法都不好使，後來想了個辦法，把用到line-height設置垂直居中的標簽都換成button。。。就行了！

Q：移動端使用overflow-auto實現滾動卡頓?

A：添加屬性 -webkit-overflow-scrolling: touch; //有回彈效果

Q：Android WebView 調試方法

前置條件Android4.4+

1.在APP中啟用 WebView 調試，開啟調試後，Chrome DevTools才能對WebView進行遠程調試；

WebView.setWebContentsDebuggingEnabled(true);　

2.通過訪問chrome://inspect/#devices訪問已啟用調試的 WebView 列表；點擊inspect即可調試，如無法調試頁面空白FQ即可。

ReactJs移動端兼容問題匯總