首页 > 其他分享 >2023-02-10 记录一下rn 图标使用方法(转载)

2023-02-10 记录一下rn 图标使用方法(转载)

时间:2023-02-10 10:58:04浏览次数:54  
标签:02 10 icons ios react vector 2023 ttf native

我原本以为react-native的button有官方写好的icon可以使用,但没曾想没有,而且还没有官方出的icon,故此得寻找第三方插件:react-native-vector-icons

插件地址:https://oblador.github.io/react-native-vector-icons/

Android:

安装:

npm install --save react-native-vector-icons

在android包里的app文件夹中找到build.gradle,并添加下面代码:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

使用:

import AntDesign from 'react-native-vector-icons/AntDesign'
...
...
<AntDesign  name="upcircleo"  size={100} color="green" />

安卓这边我试了没问题,ios的没有测。

Ios:

1、npm install --save react-native-vector-icons
2、复制 npm 上 react-native-vector-icons 上的 List of all available fonts to copy & paste in info.plist
<key>UIAppFonts</key> <array> <string>AntDesign.ttf</string> <string>Entypo.ttf</string> <string>EvilIcons.ttf</string> <string>Feather.ttf</string> <string>FontAwesome.ttf</string> <string>FontAwesome5_Brands.ttf</string> <string>FontAwesome5_Regular.ttf</string> <string>FontAwesome5_Solid.ttf</string> <string>Foundation.ttf</string> <string>Ionicons.ttf</string> <string>MaterialIcons.ttf</string> <string>MaterialCommunityIcons.ttf</string> <string>SimpleLineIcons.ttf</string> <string>Octicons.ttf</string> <string>Zocial.ttf</string> </array>
3、打开项目中的 ios 包中的 nativeApp
4、把 info.plist 在编辑器打开 内容是按照 key - value 保存的,把以上复制的内容按照 key - value 的格式粘贴到 dict 字典里面
5、cd 到 ios 包下
6、执行 pod install
7、cd …/
8、npm run ios

注:本文转载于https://blog.csdn.net/weixin_44691775/article/details/104406405

标签:02,10,icons,ios,react,vector,2023,ttf,native
From: https://www.cnblogs.com/iuniko/p/17108154.html

相关文章