Usage of TabNavigator of react-navigation

I wrote an article on the usage of StackNavigator http://blog.csdn.net/chaoyangsun/article/details/79262203 This article mainly introduces the usage of TabNavigator, the
official API https://reactnavigation.org/docs/tab-navigator.htmlGeneral
In this case, TabNavigator and StackNavigator are used together, and the usage is as follows:

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;

Here is a more comprehensive demo https://github.com/chaoyangsun/ReactNativeDemo.git