ReactNative中使用iconfont

  • 配置
    ReactNative中要使用iconfont,需要集成react-native-vector-icons库。
    集成方式:
    1.打开命令行窗口,并定位到项目的根目录下
    2.下列两种导入方式分别是下载库和关联库,选其中一个执行即可

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

    在导入成功之后,根目录/android/app/src/main/asserts/fonts文件夹下会出现默认引入的ttf格式的字体文件。如果没有该文件夹,可以手动创建一个(当然如果没有文件夹的话也不会有默认的ttf格式字体文件,此刻不要慌,接着往下看)。

  • 使用预置的icon
    在配置的时候,我们集成该库会帮我们默认引入ttf格式的字体文件,但是如果没有默认引入ttf格式的字体文件,我们需要在gradle中进行一些配置,此处的gradle是指根目录/android/app/build.gradle文件,在该文件的最后引入下面的代码:

    project.ext.vectoricons = [
            iconFontNames: [ 'FontAwesome.ttf', 'MaterialIcons.ttf' ], //这里写需要引入的字体文件
    ]
    
    apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
    
    

    如果不知道有哪些可以使用的iconfont的字体文件可以参看默认导入的字体文件,默认导入的字体文件有:Entypo.ttfEvilIcons.ttfFeather.ttfFontAwesome.ttfFoundation.ttficonfont.ttfIonicons.ttfMaterialCommunityIcons.ttfMaterialIcons.ttfOcticons.ttfSimpleLineIcons.ttfZocial.ttf

    在引入字体文件成功之后我们可以在ReactNative中使用预置的icon,使用方式:

    import FontAwesome from 'react-native-vector-icons/FontAwesome';
    
    const Icon = (props) => {
      return <FontAwesome name={'angle-double-up'} size={50} />
    };
    

    代码中FontAwesome中的name属性就是预置icon的名字。这里我们使用的是FontAwesome下的预置icon,我们可以到FontAwesome的官网上找到其预置icon的种类,其他的字体文件中预置的icon也可以用此方法找到。

  • 使用网上下载的iconfont
    需要使用网络上下载的iconfont的话,我们首先选择好需要的图标,然后解压会得到下列文件(这里我使用的是阿里旗下的iconfont)
    ReactNative中使用iconfont
    我们把iconfont.ttf文件复制到根目录/android/app/src/main/asserts/fonts下,然后再在资源文件中创建一个iconfont.json文件(这里的iconfont.json不要使用上图中的iconfont.json,一定要自己创建一个),然后在iconfont.json中写好你需要的图标名字和图标对应的Unicode编码,我的文件内容如下:

    {
      "tianqi1": 59149, // "tianqi1"是我自己写的图标名字,而59149是上面图片中iconfont.json文件对应的unicode_decimal编码
      "tianqi2": 58901
    }
    

    再新建一个js文件CXIcon.js,其代码如下:

    import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
    import glyphMap from '../../res/iconfont/iconfont.json';
    
    const iconSet = createIconSet(glyphMap, 'CXIcon', 'iconfont.ttf');
    
    export default iconSet;
    

    在需要使用到iconfont的地方引入CXIcon.js文件,使用方式如下:

    import CXIcon from '../../../utils/CXIcon';
    
    const Icon = (props) => {
      return <CXIcon name={'tianqi1'} size={50} />
    };
    

    代码中的name属性就是我在iconfont.json中定义的图标名字

ReactNative中使用iconfontReactNative中使用iconfont Royalluo 发布了1 篇原创文章 · 获赞 0 · 访问量 14 私信 关注
上一篇:ReactNative踩坑


下一篇:ReactNative: 了解CameraRoll的API使用