react-native-vector-icons的使用

yarn add react-native-vector-icons

IOS:

XCode打开 .xworkspace文件新建文件夹 fonts

截屏2024-01-25 16.28.05.png

然后在你项目的node_modules 下找到icon的依赖将你所需要的字体文件拖进你刚刚建的fonts文件

截屏2024-01-25 16.34.09.png

接着修改Info.plist 文件，在vscode中打开，新增以下内容（注意不用的可以删了，留下你所需要的即可）

<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>FontAwesome6_Brands.ttf</string>
  <string>FontAwesome6_Regular.ttf</string>
  <string>FontAwesome6_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>
  <string>Fontisto.ttf</string>
</array>

添加成功以后xcode就是这样子

截屏2024-01-25 16.48.20.png

Android：

Edit android/app/build.gradle

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