?? 這篇文，是從React開發(fā)者角度出發(fā)幅虑，適用于，打算把Reactjs寫的Web頁面嵌入原生APP中顾犹，實現(xiàn)混合開發(fā)倒庵。
一褒墨、資源文件路徑問題——PUBLIC_URL
?? 如果你使用create-react-app創(chuàng)建項目，執(zhí)行命令 yarn build 后擎宝，直接以靜態(tài)方式打開build文件夾內(nèi)的index.html,會看到頁面顯示出現(xiàn)問題郁妈，打開console后會看到j(luò)s、css绍申、svg等文件的路徑出現(xiàn)問題噩咪。
??由于目標是為了嵌入APP中，你只可能把靜態(tài)文件交付給APP開發(fā)的同學(xué)极阅，這個問題是必須解決的胃碾。
??從錯誤路徑可以看到，路徑是直接從系統(tǒng)根目錄開始寫的筋搏，就是說仆百，build之后資源引用路徑是以build為根目錄書寫的，所以需要把所有資源文件路徑都變成
./的方式才能以靜態(tài)的方式正確的讀到static文件夾里的文件奔脐。??可是俄周，如果頁面中引用了很多資源文件圖片、視頻髓迎、字體等峦朗，不可能一個個去自動建立好的文件里去找再修改路徑，這時就可以在
yarn build命令前設(shè)置PUBLIC_URL排龄。windows系統(tǒng)下：
set PUBLIC_URL=./ yarn build
mac波势、linux系統(tǒng)下：
PUBLIC_URL=./ yarn build
完成后直接打開index.html，頁面便可以正常顯示了涣雕。
如果react中還使用了路由艰亮，我的經(jīng)驗推薦是使用HashRouter就可以正常的使用路由了。
二挣郭、嵌入APP時迄埃，希望等比縮放——動態(tài)viewport
??一般在頁面頭部會加入<meta name="viewport" content="width=device-width,initial-scale=1">來適配移動端顯示，此屬性可以讓元素在pc和移動端給用戶帶來同尺寸的視覺大小兑障。關(guān)于viewport的詳解侄非。
??如果需要等比縮放，調(diào)整initial-scale值流译。例如逞怨，ios設(shè)備的devicePixelRatio=2(像素密度等級)，1px實際等于2個物理像素福澡，便可設(shè)置initial-scale=0.5來實現(xiàn)等比縮放叠赦。
ios和android設(shè)備需要不同的viewport屬性，可以通過
navigator.userAgent判斷設(shè)置viewport值革砸，顯示出自己想要的效果除秀。
三糯累、ios設(shè)備onClick元素點擊時有灰色背景出現(xiàn)——-webkit-tap-hightlight-color
??給react組件添加onClick事件后，在ios設(shè)備上點擊册踩，會自動帶有點擊反饋效果的灰色背景泳姐，設(shè)置偽標簽:active的背景為transparent也沒用，這時可以使用-webkit-tap-hightlight-color:transparent完美的解決這個問題暂吉。
