react-navigation之TabNavigator的用法

前面写了一篇StackNavigator的用法http://blog.csdn.net/chaoyangsun/article/details/79262203
本文主要介绍TabNavigator的用法，官方API https://reactnavigation.org/docs/tab-navigator.html
一般情况下TabNavigator和StackNavigator配合来用，用法如下：

const App = TabNavigator(
  {
  Main:{
    screen:MainStack,
    navigationOptions:{//设置单个tab样式
      tabBarIcon:({focused}) => {
        const p = focused ? require('./img/smile.png') : require('./img/cry.png');//根据焦点加载不同的图片
        return <Image source={p} style={styles.img}/>;
      }
    }
  },
  Middle:{
    screen:MiddleStack,
    navigationOptions: ({navigation}) => ({
      tabBarIcon:({focused,tintColor}) => {
        const p = focused ? require('./img/in_mid.png') : require('./img/out_mid.png');
        return <Image source={p} style={styles.img}/>;
      }
    })
  },
  Settings:{
    screen:SettingsStack,
    navigationOptions: ({navigation}) => ({
      tabBarIcon:({focused,tintColor}) => {
        const p = focused ? require('./img/in_set.png') : require('./img/out_set.png');
        return <Image source={p} style={styles.img}/>;
      }
    })
  }
},//上面这些设置各个tab对应的界面，可能是一个界面，也可能是一个StackNavigator
{
  tabBarOptions:{
    style: {
           height:49
       },
    activeTintColor:'#1092ee',//有焦点时的颜色
    inactiveTintColor:'gray',//无焦点时的颜色
  },
  tabBarComponent:TabBarBottom,
  tabBarPosition:'bottom',//tab的位置，默认在上面
  swipeEnabled:false,
  animationEnabled:false,
},//上面这些是设置tab样式，详细可查看API
);
export default App;

这里有一个比较全面的demo https://github.com/chaoyangsun/ReactNativeDemo.git