react-native custom icon font iconfont

Simple to use icon library react-native-vector-icons, images, buttons, tab views, navigation bar

• installation

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

• Related

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

• use

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',
		    },*/
		}
	},
})
复制代码

Use custom font iconfont-

• In iconfont website will project the desired font package downloaded to the local
• Unzip the contents of the project file for the project, we only need two files iconfont.css and iconfont.ttf
• Placed iconfont file
  • The iconfont.ttf copied to / android / app / src / main / assets under / fonts directory
  • The iconfont.css copied to the root directory of the new font folder
• Generate font map
  • Add the following code file pack.json

  "scripts": {
      "build:iconfont": "iconfonttojson ./font/iconfont.css"
  },
  //如果iconfonttojson运行报错那么需要全局安装
  
  npm install iconfont-to-json -g
  复制代码

  • Perform npm run build:iconfontunder the font directory will generate a file iconfont.js

  In order to avoid the best in iconfont tell icon font repository edit it Font Class / Symbolbefore downloading

  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
  }
  复制代码

• New in the font folder font file export component index.js

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

• use

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

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