乐趣区

关于前端:2020-ReactNative-系列之-reactnativevectoricons

jiezi

环境

  • 撰写工夫：2020-08-02
  • React Native 版本：0.63.2
  • Xcode 版本：Version 11.6 (11E708)

咱们在利用中，都有随处可见的小图标，那么在 React Native 中，咱们个别都是通过 react-native-vector-icons 来实现此项工作

install

一行命令装置 

yarn add react-native-vector-icons

IOS 平台设置

咱们须要在 ios 平台下执行 pod install

 cd ios && pod install

而后关上咱们的 xcode，源代码模式编辑 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>
    <string>Fontisto.ttf</string>
  </array>

而后在我的项目中新建 Fonts 文件夹，把 ./node_modules/react-native-vector-icons/Fonts/ 中的所有字体文件，全副拷贝进去，如图

从新编译运行就 ok 啦~

Android 平台设置

安卓平台设置更简略，两步即可

拷贝字体文件

首先和 iOS 一样 将 node-modeles\react-native-vector-icons\Fonts 目录下文件复制到我的项目 andriod\app\src\main\assets\fonts 目录下，如图

记住，如果目录不存在就新建

批改 build.gradle 文件

文件门路：andriod/app/build.gradle，减少如下代码 


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

应用

装置官网文档应用即可 

import Icon from 'react-native-vector-icons/FontAwesome';

<Icon name="rocket" size={30} color="#900" />

因为 RN 在国内缓缓的应用的人少了，所以很多教程文档基本上不可用，咱们当初新我的项目正在应用 React Native，所以记录一下每一个坑，为了防止工夫短暂对前人造成误导，故此系列文件在结尾会驰名工夫与版本

退出移动版