React-native 入坑5 createBottomTab

一般我们再开发项目当中，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 是不是如下图所示

image.png
这说明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
以下是代码的运行效果：

image.png

demo地址
希望对您有所帮助。