react-native自定义iconfont图标字体

图标库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}}
/>