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}}
/>
複製代碼