美文网首页
react-native-vector-icons的使用

react-native-vector-icons的使用

作者: 喜剧收尾_XWX | 来源:发表于2020-04-21 10:05 被阅读0次

一、安装

1.安装命令

参考https://www.npmjs.com/package/react-native-vector-icons

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

2.iOS配置

  • node_modules/react-native-vector-icons/fonts拖入工程
  • 在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>
  • 解决报错Multiple commands produce
    Xcode10使用了一个的新创建系统,比之前的提供更好的可靠性与创建性能,而且可以获取项目配置问题(默认设置新创建系统)
    New Build System会对构建中的元素循环进行严格的检查,避免不必要的重建,这个也是错误出现的原因。
    使用New Build System,在File > Project/Workspace Settings中的Share Project/Workspace Settings 里build system 将New Build System(Default)切换成Legacy build system。

3.android配置

  • 将项目中node-modeles\react-native-vector-icons\Fonts目录下所有ttf文件复制到项目andriod\app\src\main\assets\fonts目录下 (assets\fonts没有则新建文件夹)

  • 修改andriod/app目录下的build.gradle文件,在文件最上面增加 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" ( android/app/build.gradle ( 不是 android/build.gradle ))

使用

https://ionicons.com/

相关文章

网友评论

      本文标题:react-native-vector-icons的使用

      本文链接:https://www.haomeiwen.com/subject/hriyihtx.html