一般我们再开发项目当中，tabbar是必然会用到的，所以我今天就在项目中对tabbar进行踩坑。一般网上2017年或者更早的demo或者文章里面，使用的都是TabNavigator,这个最最新的React -navigation 3.0+ 已经弃用了。 官网现在使用的是‘ createBottomTabNavigator’这个函数来创建一个tabbar，而这个函数
createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig):
包含两个参数，其中RouteConfigs 是必须配置的，只要配置了RouteConfigs就算是完成一个最简单tabbar了。而BottomTabNavigatorConfig这个参数是包含对tabbar的一些配置信息。
详细信息请参考这篇博主写的文章，写的很详细。
https://juejin.im/post/5c28b00c6fb9a049e553b775
其中
这次需要最大的坑，应该就是iconfont的使用了， 因为react navigation 官网提供的tabbar的图标是是基于iconfont去实现的，所以我们先学会怎么在react-native中使用iconfont。
首先去官网下载了react navigation 官方的demo，找到package.json 可以看到需要依赖'react-native-vector-icons'这个包。
yarn add react-native-vector-icons//添加依赖包
react-native link react-native-vector-icons
// 关联项目
两者缺一不可，第二步可以手动操作
执行完这两步记得一定要对xcode的项目重新run一遍，一直在那command+ R是没有用的。当你看到
Unrecognized font family 'Ionicons'
的时候，先确认自己是不是蹊径执行了上面的两个步骤，或者看看xcode的info.plist 是不是如下图所示
这说明react-native-vector-icons已经关联上项目了，你只需要重启项目就好了。如果你想用npm去操作或者手动关联到项目可以参照下面这篇博文：http://www.mamicode.com/info-detail-2343986.html
写的很详细。
接下来就是正题了，先引入
import React from 'react'
import {createStackNavigator,createBottomTabNavigator} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons'
然后调用函数createBottomTabNavigator
const mainTab = createBottomTabNavigator({
Page1: {
screen: AppNavigator,
navigationOptions: {
tabBarLabel: 'Page1',
tabBarIcon: ({tintColor, focused}) => (
<Ionicons
name={focused ? 'ios-home' : 'ios-home-outline'}
size={26}
style={{color: tintColor}}
/>
),
}
},
Page2: {
screen: PersonNavigaotr,
navigationOptions: {
tabBarLabel: 'Page2',
tabBarIcon: ({tintColor, focused}) => (
// <Ionicons
// name={focused ? 'ios-people' : 'ios-people-outline'}
// size={26}
// style={{color: tintColor}}
// />
<Image style = {{width:26,height: 16,tintColor:tintColor}} source={ require('../images/ic_me.png')}/>
),
}
},
Page3: {
screen: PersonNavigaotr,
navigationOptions: {
tabBarLabel: 'Page3',
tabBarIcon: ({tintColor, focused}) => (
<Ionicons
name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
size={26}
style={{color: tintColor}}
/>
),
}
},
}, {
// tabBarComponent: TabBarComponent,
tabBarOptions: {
activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
// animationEnabled:true,//切换页面时是否有动画效果
// tabBarPosition:"bottom", //tabbar的位置
// swipeEnabled:false,//是否可以左右滑动切换tab
// backBehavior:'none',//按back键是否跳转到第一个tabbar（首页），none 为不跳转
// tabBarOptions:{
// activeTintColor: '#ff8500',//文字和图片的选中颜色
// inactiveTintColor:'#999',//文字和图片的未选中颜色
// showIcon:true,//默认为false 需要设置true才能显示
// indicatorStyle:{
// height: 0, //如tabbar下面有一条线，可以设置高度为0 隐藏
// },
// style:{
// backgroundColor: '#fff',//tabbar 背景颜色
// height: 49,
// },
// labelStyle:{
// fontSize: 12,// 文字大小
// }
// }
}
});
export default mainTab;
代码中我采用两种tabbarIcon 的赋值方式，都是可以的，具体的得看项目的需要。如果使用iconfont的话，肯定得知道font的‘name’是吧，不然也不能赋值啊。
这里提供文中引用的‘Ionicons’的地址：https://ionicons.com/
其他的你可以去‘react-native-vector-icons’的官网去找，应该都能找到。
还有一点就是如果官方提供的这些图标都还不够的话，你可能想要用你们UI 自己提供的阿里库的图标，你可以参考下面这个文章，写的很详细，我自己没使用，感兴趣的话，你可以尝试一下。
http://www.mamicode.com/info-detail-2343986.html
以下是代码的运行效果：
demo地址
希望对您有所帮助。
