How to use the react-navigation.TabNavigator function in react-navigation

import FinalizeGroup from './screens/finalize-group.screen';
import GroupDetails from './screens/group-details.screen';
import NewGroup from './screens/new-group.screen';
import Signin from './screens/signin.screen';
import Settings from './screens/settings.screen';

import { USER_QUERY } from './graphql/user.query';
import MESSAGE_ADDED_SUBSCRIPTION from './graphql/message-added.subscription';
import GROUP_ADDED_SUBSCRIPTION from './graphql/group-added.subscription';

import { wsClient } from './app';

import { LOGOUT } from './constants/constants';

// tabs in main screen
const MainScreenNavigator = TabNavigator({
  Chats: { screen: Groups },
  Settings: { screen: Settings },
}, {
  initialRouteName: 'Chats',
});

const AppNavigator = StackNavigator({
  Main: { screen: MainScreenNavigator },
  Signin: { screen: Signin },
  Messages: { screen: Messages },
  GroupDetails: { screen: GroupDetails },
  NewGroup: { screen: NewGroup },
  FinalizeGroup: { screen: FinalizeGroup },
}, {
  mode: 'modal',
});

/* @flow */
import React from 'react'

// See options: http://evil-icons.io/
import EvilIcons from 'react-native-vector-icons/EvilIcons'
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation'
import PhotosNavigation from './PhotosNavigation'
import NewScreen from '../Containers/NewScreen'
import LaunchScreen from '../Containers/LaunchScreen'

import styles from './Styles/NavigationStyles'

const TabNav = TabNavigator(
  {
    PhotosNavigation: { screen: PhotosNavigation },
    NewScreen: { screen: NewScreen },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'PhotosNavigation') {
          iconName = `heart`;
        } else if (routeName === 'NewScreen') {
          iconName = `gear`;
        }
        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons

TabThreeNavigation: { screen: TabThreeNavigation },
}

const tabBarConfiguration = {
  //...other configs
tabBarOptions:{
    // tint color is passed to text and icons (if enabled) on the tab bar
    activeTintColor: 'white',
    inactiveTintColor: 'blue',
// background color is for the tab component
    activeBackgroundColor: 'blue',
    inactiveBackgroundColor: 'white',
  }
}

export const TabBar = TabNavigator(routeConfiguration,tabBarConfiguration)

export const tabBarReducer = (state,action) => {
  if (action.type === 'JUMP_TO_TAB') {
    return { ...state, index:0 }
  } else {
    return TabBar.router.getStateForAction(action,state)
  }
}

screen: AlbumProfile,
    path: 'profile',
    navigationOptions: ({navigation}) => ({
      title: 'Album Profile'
    })
  },
  ImageProfile2: {
    screen: ImageProfile,
    path: 'imageProfile2',
    navigationOptions: ({navigation}) => ({
      title: "Image profile"
    })
  }
})

const RootNavigator = TabNavigator({
  Home: {
    screen: HomeStackNavigator,
  },
  Photos: {
    screen: RootStackNavigator
  },
  Album: {
    screen: AlbumStackNavigator
  }
  // Album: {
  //   screen: Album
  // }
}, {
  tabBarPosition: 'bottom',
  tarBarOptions: {
    activeTintColor: '#e91e63',

const client = new Client({
  url: AppSync.graphqlEndpoint,
  region: AppSync.region,
  auth: {
    type: 'AMAZON_COGNITO_USER_POOLS',
    jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken(),
  }
});

import SignIn from './SignIn'
import SignUp from './SignUp'
import Cities from './Cities'
import AddCity from './AddCity'
import Profile from './Profile'

const Tabs = TabNavigator({
  SignIn: { screen: SignIn },
  SignUp: { screen: SignUp }
})

const AppNav = TabNavigator({
  Cities: { screen: Cities },
  AddCity: { screen: AddCity },
  Profile: { screen: Profile }
})

const SwitchNav = SwitchNavigator({
  Tabs,
  AppNav
}, {
  initialRoute: Tabs
})

const MyProfileScreen = ({ navigation }) => (
  
);

const MyNotificationsSettingsScreen = ({ navigation }) => (
  
);

const MySettingsScreen = ({ navigation }) => (
  
);

const TabNav = TabNavigator(
  {
    MainTab: {
      screen: MyHomeScreen,
      path: '/',
      navigationOptions: {
        title: 'Welcome',
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor, focused }) => (
          
        ),
      },
    },

export default class BookMainPage extends Component{
    render(){
        return(
            
                /* }>
                  {/!*  
                    
                    *!/}
                    
                    
                    
                */
        )
    }
}
BookMainTab = new TabNavigator(
    {
        CulturePage:{
            screen:CulturePage,
            navigationOptions: {
                title: '文学',
            }
        },
        LifePage:{
            screen:LifePage,
            navigationOptions: {
                title:'生活',
            }
        },
        LiteraturePage:{
            screen:LiteraturePage,
            navigationOptions: {

import React from 'react';
import { Platform } from 'react-native';
import { TabNavigator, StackNavigator } from 'react-navigation';
import { Ionicons as Icon } from '@expo/vector-icons';
import { Colors } from './constants';

import Explore from './screens/Explore';
import AllMessages from './screens/AllMessages';
import Profile from './screens/Profile';

import UserProfile from './screens/UserProfile';
import Chat from './screens/Chat';

const HomeTabs = TabNavigator({
  Explore: {
    screen: Explore,
    navigationOptions: {
      title: 'Explore',
      tabBarIcon: ({ tintColor }) => (
        
      )
    }
  },
  Messages: {
    screen: AllMessages,
    navigationOptions: {

},
              isMuted: false
            }}
            isPortrait={this.state.isPortrait}
            switchToLandscape={this.switchToLandscape.bind(this)}
            switchToPortrait={this.switchToPortrait.bind(this)}
            playFromPositionMillis={0}
          />

        
      
    );
  }
}

const MainTabNavigator = TabNavigator(
  {
    Default: {
      screen: DefaultScreen,
    },
    Custom: {
      screen: CustomScreen,
    },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch (routeName) {
          case 'Default':
            iconName = Platform.OS === 'ios'

import React from "react";
import { View } from "react-native";
import { TabNavigator } from "react-navigation";
import HomeRoute from "../routes/HomeRoute";
import SearchRoute from "../routes/SearchRoute";
import NotificationsRoute from "../routes/NotificationsRoute";
import ProfileRoute from "../routes/ProfileRoute";
import { Ionicons } from "@expo/vector-icons";

const TabsNavigation = TabNavigator(
  {
    Home: {
      screen: HomeRoute,
      navigationOptions: {
        tabBarIcon: ({ focused }) => (
          
        )
      }
    },
    Search: {
      screen: SearchRoute,
      navigationOptions: {