react-native 使用第三方字体图标库-阿里字体图标库

一、安装react-native-vector-icons可自定义icon的依赖

1: yarn add react-native-vector-icons
2: cd ios
3: pod install
4: cd ..

二、下载阿里字体图标包

下载阿里字体图标包

三、拷贝字体文件

字体文件

android

android将字体文件拷贝到/rntstest/android/app/src/main/assets/fonts/（rntstest项目名称）下，如果没有fonts，可以自己建一个文件夹。如图下图

android字体存放目录

ios

ios 导入字体文件

xcode导入字体

可以选择项目内字体文件或者选择Add Other选择非xx.xcworkspace下的字体文件

选择字体文件

选择字体文件

选择字体文件

info.list添加字体

info.list添加字体

info.list添加字体

四、自定义Iconfont组件存放目录随意，我这里放在assets/font/

assets/font/目录

将字体包css拷贝至font目录下

将字体包css拷贝至font目录下

新建一个生成iconfont.json的脚本命令

新建一个生成iconfont.json的脚本命令

脚本代码

const path = require('path');
const fs = require('fs');
const css = require('css');
const filePath = path.join(__dirname, '../assets/font/iconfont.css');
const fileStr = fs.readFileSync(filePath);
const obj = css.parse(fileStr.toString());
const outputJson = {};
obj.stylesheet.rules.forEach(val => {
  try {
    //注意如果没有自定义图标名称请使用 if (val.selectors[0].indexOf('.icon-') !== -1) {
    if (val.selectors[0].indexOf('.TRP-') !== -1) {
      let key = val.selectors[0].replace('.', '').replace(':before', '');
      let base16 = val.declarations[0].value
        .replace(/\\/g, '')
        .replace(/\"/g, '');
      outputJson[key] = parseInt(base16, 16);
    }
  } catch (e) {}
});
// const outPut = `export default ${JSON.stringify(outputJson, null, 2)}`;
const outPut = JSON.stringify(outputJson, null, 2);
fs.writeFile(
  path.join(__dirname, '../assets/font/iconfont.json'),
  outPut,
  err => {
    if (err) throw err;
    console.log('写入成功！');
  },
);

// package
{
"name": "rntstest",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "postinstall": "patch-package",
    "build:iconfont": "node ./scripts/iconfont2json.js"
  },
}

执行npm run build:iconfont生成iconfont.json
在font/下新建一个index.js

import {createIconSet} from 'react-native-vector-icons'
const fontJson = require('./iconfont.json');
export const Iconfont = createIconSet(fontJson, 'trp-font', 'iconfont.ttf');

使用

import React from 'react';
import {
    SafeAreaView,
    ScrollView,
    Text,
    View,
    Image,
    StatusBar,
    useColorScheme,
    Button,
    StyleSheet,
    Dimensions
} from 'react-native'
// 导入组件
import {Iconfont} from "../../assets/font";
import {Colors} from "react-native/Libraries/NewAppScreen";

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const styles: any = StyleSheet.create({
    containerWidth: {
        width: windowWidth,
        height: windowHeight
    }
})
const Home = ({route, navigation}) => {
    const isDarkMode = useColorScheme() === 'dark';
    const backgroundStyle = {
        backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    };
    const linkTo = (target: String) => navigation.navigate(target, {
        id: 1000,
        otherParams: 'anything you want here'
    });
    return (
        
            
            
                
                    list
                    
                    // 使用组件name为字体图标名称，size设置大小，color设置图标颜色
                    
                     {
                        linkTo('Detail')
                    }}/>
                
            
        
    )
};
export default Home

执行npm run ios/npm run android查看效果

ios

android

版本说明
"react-native": "0.64.0",
"react-native-vector-icons": "^8.1.0",