一、安装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 (
<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'}/>
<ScrollView>
<View>
<Text style={{textAlign: 'center'}}>list</Text>
<Image source={require('../../assets/img/MV.jpeg')} style={styles.containerWidth}
resizeMode={'cover'}/>
// 使用组件name为字体图标名称，size设置大小，color设置图标颜色
<Iconfont name={'TRP-Star'} size={54} color={'#9feb42'}/>
<Button title={'查看详情'} onPress={() => {
linkTo('Detail')
}}/>
</View>
</ScrollView>
</SafeAreaView>
)
};
export default Home
执行npm run ios/npm run android查看效果
ios
android
版本说明
"react-native": "0.64.0",
"react-native-vector-icons": "^8.1.0",
