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文件夹中就可以了。如下图:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容