图标库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:iconfont
font目录下会生成一个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}}
/>
复制代码