react-native字体react-native-vector-icons在ios下的使用

Posted 沧海一粟,何以久远

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native字体react-native-vector-icons在ios下的使用相关的知识,希望对你有一定的参考价值。

react-native字体react-native-vector-icons在ios下的使用

官网和网上有各种针对ios/android的安装和使用方法;能够使用了,基本就等于安装成功了。

react-native-vector-icons 的图标分为几个模块, 使用的时候先import FontAwesome from ‘react-native-vector-icons/FontAwesome‘; 这样才能使用 FontAwesome 标签, 标签内使用 name 字段指定是某个图标.

  1. 项目添加依赖:
    yarn add react-native-vector-icons
  2. 修改Podfile文件,使用CocoaPods对ios安装这个字体库:
    vim project_dir/ios/Podfile
    pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
    在ios目录下执行pod install,使用CocoaPods安装这个依赖
  3. 修改Info.plist,添加:
    vim project_dir/ios/project_name/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>
  4. 简单实用
    import Icon from 'react-native-vector-icons/Ionicons';
    
    function ExampleView(props) {
      return <Icon name="ios-person" size={30} color="#4F8EF7" />;
    }
    
    不同的图标使用名字区分;上例的图标名字(Icon-->name)在[图标名字库](https://oblador.github.io/react-native-vector-icons/)里查找。
    在文件node_modules/react-native-vector-icons/glyphmaps/*.json里也可以看到所有图标的名字
  5. android下的使用:据说项目添加依赖后(执行步骤1)执行下面的命令关联下就可以了,待验证
    react-native link react-native-vector-icons
参考:
  1. https://www.npmjs.com/package/react-native-vector-icons#examples
  2. https://oblador.github.io/react-native-vector-icons/
  3. https://www.jianshu.com/p/2b74ba057287
  4. https://blog.csdn.net/yingBi2014/article/details/102933684

以上是关于react-native字体react-native-vector-icons在ios下的使用的主要内容,如果未能解决你的问题,请参考以下文章

无法运行 react-native run-android?

如何使用 Xcode 12 Beta 4 构建 React-Native 项目?

ReactNative入门代码结构

我的 react-native 应用程序无法识别 react-native-image-crop-picker

找不到构建工具修订版 23.0.1

在 React-Native 中使用自定义字体