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

import { createAppContainer, createStackNavigator } from 'react-navigation';

// grab screens
import ModalCastConnect from '../screens/ModalCastConnect';
import ModalAddProfile from '../screens/ModalAddProfile';
import ModalManageProfiles from '../screens/ModalManageProfiles';
import ModalVideo from '../screens/ModalVideo';
import ModalWebView from '../screens/ModalWebView';

// grab tabbed stacks
import TabNavigator from './TabNavigator';

// grab modal routes (dynamic transitions)
import ModalRoutes from './ModalRoutes';

const StackNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator
    },

    // Modals
    // /////////////////////////////////////////////////////////////////////////
    ModalCastConnect: {
      screen: ModalCastConnect,
      navigationOptions: {
        gesturesEnabled: false
      }
    },
    ModalAddProfile: {
      screen: ModalAddProfile,
      navigationOptions: {

}
      >
        
      

    )
  }
}

const ExtraViews = { ...Views, MainTabBar }
delete ExtraViews.Find
delete ExtraViews.Video
delete ExtraViews.Mine
delete ExtraViews.Friends
delete ExtraViews.Account
const AppNavigator = createStackNavigator({ ...ExtraViews }, { ...STACKNAVIGATOR_DEFAULT_OPTIONS, initialRouteName: 'MainTabBar' })

const IncludeModalContainerNavigator = createStackNavigator({
  Base: { screen: AppNavigator }
  /* add modal screen */
}, { ...MODAL_DEFAULT_OPTIONS })

const Base = createSwitchNavigator({
  Load: ExtraViews.Loading,
  App: IncludeModalContainerNavigator,
  Auth: ExtraViews.Login
}, { initialRouteName: 'Load' })

const AppContainer = createAppContainer(Base)

export default AppContainer

//
///////////////////////////////////////////////////////////////////////////////////////

console.disableYellowBox = true;

import React from 'react'
import {Component} from 'react';

import { createAppContainer, createStackNavigator } from 'react-navigation';

import HomeView from './HomeView';
import SettingsView from './SettingsView';
import GeofenceView from './GeofenceView';
import AboutView from './AboutView';

const AdvancedApp = createStackNavigator({
  Home: {
    screen: HomeView
  },
  Settings: {
    screen: SettingsView
  },
  Geofence: {
    screen: GeofenceView
  },
  About: {
    screen: AboutView
  }
}, {
  initialRouteName: 'Home',
  headerMode: 'none',
  mode: 'modal'

import { createStackNavigator, createSwitchNavigator } from 'react-navigation'
import HomeScreen from '../Containers/HomeScreen'
import LoginScreen from '../Containers/LoginScreen'

const AppStack = createStackNavigator(
  {
    Home: { screen: HomeScreen },
  },
  {
    initialRouteName: 'Home',
    headerMode: 'float',
  },
)

const AuthStack = createStackNavigator(
  {
    Login: { screen: LoginScreen },
  },
  {
    initialRouteName: 'Login',
    headerMode: 'none',
  },
)

const RootNavigator = createSwitchNavigator(
  {
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'Auth',

Home: {
    screen: Home,
    navigationOptions: navigationOptions()
  }
}, {
  navigationOptions: defaultNavigationOptions(0)
});
const ChartStack = createStackNavigator({
  Chart: {
    screen: Chart,
    navigationOptions: navigationOptions()
  },
}, {
  navigationOptions: defaultNavigationOptions(1)
});
const NoneStack = createStackNavigator({
  None: {
    screen: None,
    navigationOptions: navigationOptions()
  },
}, {
  navigationOptions: defaultNavigationOptions(2)
});
const FindStack = createStackNavigator({
  Find: {
    screen: Find,
    navigationOptions: navigationOptions()
  },
}, {
  navigationOptions: defaultNavigationOptions(3)
});
const MineStack = createStackNavigator({

return {
    tabBarVisible,
  }
}

export const SplitSideChatNavigator = createStackNavigator(
  {
    'chats/list': List,
  },
  {
    initialRouteName: 'chats/list',
    navigationOptions: handleNavigationsOptions,
  }
)

export const SubviewsChatDetailsNavigator = createStackNavigator(
  {
    'chats/detail': Detail,
    'chats/settings': {
      screen: ChatSettingsNavigator,
      navigationOptions: () => ({
        header: null,
      }),
    },
    'chats/contact/detail/list': ContactDetailList,
    'chats/contact/detail/edit': ContactDetailEdit,
    'chats/settings/add-member': Add,
  },
  {
    initialRouteName: 'chats/detail',
    navigationOptions: handleNavigationsOptions,
  }

screen: News,
    }, 
  },
  navigationOptions
  
);
const MetroNavigator = createStackNavigator(
  {
    Metro:{
      screen: Metro,
    }, 
  },
  navigationOptions
  
);
const TravelNavigator = createStackNavigator(
  {
    Travel:{
      screen: Travel,
    }, 
  },
    navigationOptions
  
);

const PlayNavigator = createStackNavigator(
  {
    Play:{
      screen: Play,
    }, 
  },
    navigationOptions

) => {
    let animatedValue = new Animated.Value(0)

    const navigation: { [key: string]: NavigationContainer } = { _: parent }
    for (const [key, value] of Object.entries(modalRoutes)) {
        navigation[key] = addStaticRouterWithModal(value, () => animatedValue)
    }

    if (!supportsTransparentCards()) {
        return createStackNavigator(navigation, {
            headerMode: 'none',
            initialRouteName: '_',
        })
    }

    return createStackNavigator(navigation, {
        mode: 'modal',
        headerMode: 'none',
        transparentCard: true,
        cardOverlayEnabled: true,
        initialRouteName: '_',
        defaultNavigationOptions: {
            gesturesEnabled: false,
        },
        transitionConfig: (transitionProps, prevTransitionProps) => {
            const {
                position,
                scene: { index },
            } = transitionProps

            animatedValue = position.interpolate({
                inputRange: safeInterpolation([index - 1, index, index + 1]),

* Created by Tzingtao Chow
 * ---
 *
 * 设置导航器。
 * 使用它在应用内不同的设置页面和设置项之间跳转。
 *
 */

import { createStackNavigator } from "react-navigation"
import { SettingsScreen } from "../screens/settings-screen"
import { LanguageSettingsScreen } from "../screens/settings-screen/language-settings-screen"
import { DaysEachWeekSettingsScreen } from "../screens/settings-screen/days-each-week-settings-screen"
import { ScheduleTextSizeSettingsScreen } from "../screens/settings-screen/schedule-text-size-settings"
import { PaletteSettingsScreen } from "../screens/settings-screen/palette-settings-screen"

export const SettingsNavigator = createStackNavigator(
  {
    settings: SettingsScreen,
    language: LanguageSettingsScreen,
    daysEachWeek: DaysEachWeekSettingsScreen,
    scheduleTextSize: ScheduleTextSizeSettingsScreen,
    palette: PaletteSettingsScreen,
  },
  {
    initialRouteName: "settings",
    headerMode: "none",
  },
)