Комбинирование стекового переключателя и навигации по ящикам в естественной навигации

Question

Привет, люди, я новичок в своем родном мире. поэтому я пытаюсь объединить два типа навигации: сначала я создаю поток аутентификации пользователя при входе в систему, который я реализовал с помощью переключений и стековых переходов после того, как пользователь вошел в систему. У меня есть разные экраны с навигацией по ящикам. Как мне объединить все эти вещи, очень запутанные в реагирующей навигации, мой код внизу.

//MainApp.js
// import React, { Component }  from 'react';
import React, { Component } from "react";
import { StyleSheet, Text, View,SafeAreaView, ScrollView, Dimensions,Image,TouchableOpacity,Button, Alert } from 'react-native';
import {Constants} from 'expo';
import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';

// import Icon from '@expo/vector-icons/Ionicons';
import {Ionicons} from '@expo/vector-icons';

import AboutUs from "./screens/AboutUs";
import Home from "./screens/Home";
import Feedback from "./screens/Feedback";
import Logout from "./screens/Logout";
import ChangePassword from "./screens/ChangePassword";
import KeyFeatures from "./screens/KeyFeatures";
import YoutubeChannel from "./screens/YoutubeChannel";
import FMTransmission from "./screens/FMTransmission";
import HelpLine from "./screens/HelpLine";
import NearbyPlaces from "./screens/NearbyPlaces";
import Recharge from "./screens/Recharge";
import JourneyPrayers from "./screens/JourneyPrayers";
import Notifications from "./screens/Notifications";
import Media from "./screens/Media";
import Settings from "./screens/Settings";
// import Notifications from "./screens/Notifications";
import SignupPhone from "./screens/SignupPhone";
import SignupOTP from "./screens/SignupOTP";
import SignIn from "./screens/SignIn";
import CustomHeader from "./screens/CustomHeader";
import browser from './screens/browser';
import { createStackNavigator } from "react-navigation-stack";

const {width} = Dimensions.get('window'); 

export default class App extends Component {
    render () { 
    const AppNavigator = createAppContainer(AppDrawerNavigator);
    const mystack = createAppContainer(mystack);
    
    return (
        <AppNavigator/>
        
        

    );
    }
}
const CustomDrawerComponent = (props) => (
    <SafeAreaView style = {{flex : 1}}>
        <View style = {{height : 150 , backgroundColor : 'white' , alignItems : 'center' , justifyContent : 'center'}}>
            <TouchableOpacity>
            <Image source = {require('./images/profile.jpg') } style = {{height : 120 , width : 120 , 
                borderRadius : 60 , marginTop : 45}} />
              </TouchableOpacity>
        </View>
            <View style = {{height : 30 , backgroundColor : 'white' , alignItems : 'center' , justifyContent : 'center'}}>
                <Text>Ahmed Saeed</Text>
            </View>
        
        <ScrollView>
            <DrawerItems {...props}/>
        </ScrollView>
    </SafeAreaView>
  )

const mystack = createStackNavigator({
  Media : {screen : Media},
  browser : {screen : browser}
})

const AppDrawerNavigator = createDrawerNavigator({
  
  // Home: {
  //   screen: Home,
  //   navigationOptions: {
  //     drawerIcon: ({ tintColor }) => (<Ionicons name = "md-home" size={24} style={{ color: tintColor }} />),
  //   }
  // },
  AboutUs: {
    screen: AboutUs,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (<Ionicons name = "md-card" size={24} style={{ color: tintColor }} />),
    }
  },
  JourneyPrayers: {
    screen: JourneyPrayers,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (<Ionicons name = "md-ribbon" size={24} style={{ color: tintColor }} />),
    }
  },
  HelpLine: {
    screen: HelpLine,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (<Ionicons name = "md-call" size={24} style={{ color: tintColor }} />),
    }
  },

  // KeyFeatures: {
  //   screen: KeyFeatures,
  //   navigationOptions: {
  //     drawerIcon: ({ tintColor }) => (<Ionicons name = "md-home" size={24} style={{ color: tintColor }} />),
  //   }
  // },
  Media: {
      screen: Media,
      navigationOptions: {
        drawerIcon: ({ tintColor }) => (<Ionicons name = "md-radio" size={24} style={{ color: tintColor }} />), 
      }
    },
  // YoutubeChannel: {
  //   screen: YoutubeChannel,
  //   navigationOptions: {
  //     drawerIcon: ({ tintColor }) => (<Ionicons name = "logo-youtube" size={24} style={{ color: tintColor }} />),
  //   }
  // },
  // FMTransmission: {
  //   screen: FMTransmission,
  //   navigationOptions: {
  //     drawerIcon: ({ tintColor }) => (<Ionicons name = "md-radio" size={24} style={{ color: tintColor }} />),
  //   }
  // },
 
   NearbyPlaces: {
    screen: NearbyPlaces,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (<Ionicons name = "md-pin" size={24} style={{ color: tintColor }} />),
    }
  },

  Notifications: {
    screen: Notifications,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (<Ionicons name = "md-notifications" size={24} style={{ color: tintColor }} />),
    }
  },
  SignupPhone: {
    screen: SignupPhone,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (<Ionicons name = "md-notifications" size={24} style={{ color: tintColor }} />),
    }
  },
  SignupOTP: {
    screen: SignupOTP,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (<Ionicons name = "md-notifications" size={24} style={{ color: tintColor }} />),
    }
  },
  SignIn: {
    screen: SignIn,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (<Ionicons name = "md-notifications" size={24} style={{ color: tintColor }} />),
    }
  },
  // SignIn: {
  //   screen: SignIn,
  //   navigationOptions: {
  //     drawerIcon: ({ tintColor }) => (<Ionicons name = "md-notifications" size={24} style={{ color: tintColor }} />),
  //   }
  // },
  Settings: {
    screen: Settings,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (<Ionicons name = "md-log-out" size={24} style={{ color: tintColor }} />),
    }
  },
  // ChangePassword: {
  //   screen: ChangePassword
  // },
},
{
   
    contentComponent : CustomDrawerComponent,
    drawerPosition: 'left',
    drawerWidth : (width/3)*2,
    contentOptions: {
    activeTintColor : '#950900',
  }
  },
  // navigationOptions : {
  //   headerBackground: (
  //     <LinearGradient
  //       colors={['#a13388', '#10356c']}
  //       style={{ flex: 1 }}
  //       start={{x: 0, y: 0}}
  //       end={{x: 1, y: 0}}
  //     />
  //   ),
  //   headerTitleStyle: { color: '#fff' },
  // }
  );

// export default createAppContainer(AppDrawerNavigator);

// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//     alignItems: 'center',
//     justifyContent: 'center'
//   }
// });
//App.js
import React, { Component } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, ActivityIndicator, Platform } from 'react-native';
import {createAppContainer,createStackNavigator,createSwitchNavigator} from 'react-navigation';
import MobileCheck from './screens/MobileCheck';
import VerifyCode from './screens/VerifyCode';
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';
import ForgotPassword from './screens/ForgotPassword';
import MobileCheckFP from './screens/MobileCheckFP';
const authSwitch = createSwitchNavigator ({
    SignInStack : createStackNavigator({
      Login : LoginScreen,
      Home : HomeScreen,
    }),
    SignUpStack :  createStackNavigator({
    MobileCheck : MobileCheck,
    VerifyCode : VerifyCode,
    Login : LoginScreen,
    Home : HomeScreen,
  }),
    ForgotPasswordStack : createStackNavigator({
        MobileCheckFP : MobileCheckFP,
        ForgotPassword : ForgotPassword,
        Login : LoginScreen,
        Home : HomeScreen,
    })
})
const App = createAppContainer(authSwitch);
export default App;