React-web中react-native-vector-icons顯示異常解決方法

1.前期通過TBF團隊的react-web把公司的react-native項目轉碼成web端頁面,具體操作請參考github:https://github.com/taobaofed/react-web,折騰一段時間后代碼正確編譯成功,還是有點小激動的……

2.but,打開頁面icon無法顯示,都是圈圈是什么鬼?后來查看github發現按如下設置可以正常顯示,到https://github.com/driftyco/ionicons/tree/master/fontshttps://github.com/driftyco/ionicons/tree/master/css下載fonts,css文件,后放進項目中。


4.在index.web.js(如果沒有就在你web start的文件)寫上:


5.在webpack.config.js文件module中加入如下代碼:正常情況下需要install style-loader和css-loader到項目中。


6.然后打包運行就可以了。如果圖標顯示不正確,可以到react-native-vector-icons中復制fonts文件夾內容放到原先下載的fonts文件夾中就可以了。如下圖:


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容