React Native 使用阿里矢量图库

1.通过阿里矢量图库下载字体文件

React Native 使用阿里矢量图库_第1张图片
image

2.选择文件夹中的 iconfont.ttf 文件

  1. IOS:
    使用Xocde打开项目,通过add Files 添加到项目中,打开info.plist, 新建Fonts provided by application属性,并配置 iconfont.ttf (这个名字会和fontFamily有关

Android:
在Android环境下就比较的简单,对于自定义的图标库,也只需要在android/app/build.gradle中添加:


project.ext.vectoricons = [

    iconFontNames: ['iconfont.ttf' ] //添加你需要赋值的字符文件

]

然后把ttf文件copy到[project root]/android/app/src/main/assets/fonts/之下就好啦

如果修改了ttf文件,需要重新react-native run-[plantform]才行。

//使用方法

//1.设置样式
instructions: {
    fontFamily:'iconfont',
  }
//2.引用图标
let fontMap = {
  '651': '\ue651' //  == \ue651
}
//3.样式引用

          {fontMap['651']}

你可能感兴趣的:(React Native 使用阿里矢量图库)