React Native实现自定义图标

零到壹度
Lepaskan: 2018-03-28 14:35:32
asal
2032 orang telah melayarinya

本文主要为大家分享一篇React Native实现自定义图标的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧。

以react-native-vector-icons组件为例

使用Ionicons.ttf字体,该字体文件在

node_modules/react-native-vector-icons/Fonts/Ionicons.ttf
Salin selepas log masuk

引入方法

 import Icon from 'react-native-vector-icons/Ionicons';
Salin selepas log masuk

打开http://fontstore.baidu.com/static/editor/index.html,打开Ionicons.ttf字体


可以去http://www.iconfont.cn/搜索图标并下载svg格式


点击新导入的图标,进行"字形信息"的修改


打开

node_modules/react-native-vector-icons/glyphmaps/Ionicons.json
Salin selepas log masuk

添加对应的值,不要和已有的重复即可

360截图20180328135814927.jpg

最后在组件中使用

360截图20180328135842991.jpg

效果如下

360截图20180328135909675.jpg

Atas ialah kandungan terperinci React Native实现自定义图标. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!