react-native自定义iconfont图标字体

最新推荐文章于 2024-09-05 15:51:43 发布

转载最新推荐文章于 2024-09-05 15:51:43 发布 · 362 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cef715f6fb9a07eeb138c90

文章标签：

#移动开发 #json

本文介绍了图标库react-native-vector-icons的简单使用，包括安装、关联和使用方法。还讲解了使用iconfont自定义字体，如在网站下载字体包，获取所需文件并放置到指定目录，生成字体map，以及在pack.json添加代码生成iconfont.js文件等内容。

图标库react-native-vector-icons的简单使用,图片,按钮,标签视图,导航条

安装

npm install react-native-vector-icons --save (回车)
复制代码

关联

react-native link react-native-vector-icons
复制代码

使用

import Ionicons from 'react-native-vector-icons/Ionicons'

const AppBottomNavigator = createBottomTabNavigator({
	Home:{
		screen:Home,
		navigationOptions:{
			tabBarLabel:'首页',
			tabBarIcon:({tintColor,focused})=>{
				return(
					<Ionicons
						name='icon-home'
						size={26}
						style={{color:tintColor}}
					/>
				)
			},
		/*	tabBarOptions: {//可单独配置颜色
		      activeTintColor: 'tomato',
		      inactiveTintColor: 'gray',
		    },*/
		}
	},
})
复制代码

使用 iconfont-自定义字体

在iconfont网站上将项目所需字体打包下载到本地
解压项目文件获取项目内容,我们只需要 iconfont.css 和 iconfont.ttf 两个文件
放置iconfont 文件
- 把 iconfont.ttf 拷贝到 /android/app/src/main/assets/fonts 目录下
- 把 iconfont.css 拷贝到根目录新建的 font 文件夹下

生成字体map

在pack.json文件中添加如下代码

"scripts": {
    "build:iconfont": "iconfonttojson ./font/iconfont.css"
},
//如果iconfonttojson运行报错那么需要全局安装

npm install iconfont-to-json -g
复制代码

执行npm run build:iconfontfont目录下会生成一个iconfont.js文件

为了避免分不清图标最好在iconfont字体仓库里面编辑一下Font Class / Symbol后才下载

export default {
  "icon-31daishouhuo": 58883,
  "icon-31daipingjia": 58884,
  "icon-31faner": 58885,
  "icon-shopcar_active": 58886,
  "icon-shopcar": 58887,
  "icon-home_active": 58888,
  "icon-home": 58889
}
复制代码

在font文件夹下新建index.js文件导出字体组件

import { createIconSet } from 'react-native-vector-icons'
import fontMap from './iconfont'
export const Iconfont = createIconSet(fontMap,'Iconfont','iconfont.ttf')
复制代码

使用

import { Iconfont } from "../font";

<Iconfont
	name='icon-home'
	size={26}
	style={{color:tintColor}}
/>
复制代码