как выйти из ящика навигатора в реагировать на родной

Question

Итак, я только что нашел видео на YouTube и начал делать навигатор по ящикам, но после всего, что я знаю, не знаю, куда поместить свое навигационное место в навигаторе по ящикам, а также как применить к нему функцию, я застрял там, потому что Я новичок, чтобы отреагировать, пожалуйста, помогите мне

здесь мой главный экран. js

import React,{Component} from 'react'

import { createAppContainer } from 'react-navigation'
import {createDrawerNavigator} from 'react-navigation-drawer'
import {Dimensions} from 'react-native'
// import SidebarScreen from './SidebarScreen'
import {Feather} from '@expo/vector-icons'
const { width, height } = Dimensions.get('screen');

import {
    ProfileScreen,
    MessageScreen,
    ActivityScreen,
    ListScreen,
    ReportScreen,
    StatisticScreen,
    SignOutScreen,
} from "./Index"

import SidebarScreen from './SidebarScreen'

const DrawerNavigator = createDrawerNavigator({

    ProfileScreen:{
        screen: ProfileScreen,
        navigationOptions:{
            title:"Profile",

            drawerIcon:({tintColor})=><Feather name="user" size={16} color={tintColor} />
        }
    },
    MessageScreen:{
        screen: MessageScreen,
        navigationOptions:{
            title:"Message",
            drawerIcon:({tintColor})=><Feather name="message-square" size={16} color={tintColor} />
        }
    },
    ActivityScreen:{
        screen: ActivityScreen,
        navigationOptions:{
            title:"Activity",
            drawerIcon:({tintColor})=><Feather name="activity" size={16} color={tintColor} />
        }
    },
    ListScreen:{
        screen: ListScreen,
        navigationOptions:{
            title:"List",
            drawerIcon:({tintColor})=><Feather name="list" size={16} color={tintColor} />
        }
    },
    ReportScreen:{
        screen: ReportScreen,
        navigationOptions:{
            title:"Report",
            drawerIcon:({tintColor})=><Feather name="trending-up" size={16} color={tintColor} />
        }
    },
    StatisticScreen:{
        screen: StatisticScreen,
        navigationOptions:{
            title:"Statistic",
            drawerIcon:({tintColor})=><Feather name="bar-chart" size={16} color={tintColor} />
        }
    },
    SignOutScreen:{
        screen: SignOutScreen,
        navigationOptions:{
            title:"SignOut",
            drawerIcon:({tintColor})=><Feather name="log-out" size={16} color={tintColor} />,

        }
    },
},

  {
    contentComponent:props => <SidebarScreen {...props} />,

    // drawerWidth:Dimensions.get('window').width = 0.80,
    drawerWidth: Math.min(height, width) * 0.8,
    hideStatusBar: false,

    contentOptions:{
        activeBackgroundColor:"rgba(212,118,207,0.2)",
        activeTintColor:"#531158",
        itemsContainerStyle:{
            marginTop:16,
            marginHorizontal:8
        },

    }
  }

);

 export default createAppContainer(DrawerNavigator);

и вот мой боковой экран. js

 import React,{useState,useEffect} from 'react'
import {View,Text,StyleSheet,ScrollView,ImageBackground,Image,AsyncStorage,TouchableOpacity} from 'react-native'
import {DrawerNavigatorItems} from 'react-navigation-drawer'
// import MainScreen from './MainScreen'
import {Ionicons} from '@expo/vector-icons'

export default SidebarScreen = props =>{

    const [email,setEmail] = useState('loading')
    const [name,setName] = useState('loading')
    const [mobile,setMobile] = useState('loading')
    const [isLoaded,setIsloaded] = useState(false);

 AsyncStorage.getAllKeys((err, keys) => {
        AsyncStorage.multiGet(keys, (error, stores) => {
          stores.map((result, i, store) => {
            console.log({ [store[i][0]]: store[i][1] });
            return true;
          }); 
        });
      });

      useEffect(() => {
        async function fetchData() {
         setIsloaded(true)
        const token = await AsyncStorage.getItem('token');

        fetch('http://127.0.0.1',{
            headers:new Headers({
                Authorization:'Bearer '+token
            })
        }).then(res=>res.json())
        .then(data=>{
          setIsloaded(true)
            // console.log(data)
            setEmail(data.email)
            setName(data.name)
            setMobile(data.mobile)
        })
        }
        fetchData();
      }, []); // Or [] if effect doesn't need props or state

      const logout = (props) =>{

           console.log(props);
         AsyncStorage.removeItem('token').then(()=>{
          props.navigation.replace('Login');
         })
      }


 return(

  <ScrollView style={{backgroundColor: '#ffff'}}>
        <ImageBackground
        source = {require("../../assets/screenback.jpg")}
        style={{width:undefined,padding:16,paddingTop:48}}
        >
        <Image source={require("../../assets/profile.png")} style={styles.profile} />
        <Text style={styles.name}>{name}</Text>

        <View style={{flexDirection: 'row'}}>
        {/*<Text style={styles.follower}></Text> */}
        <Ionicons name= "md-people" size={16} color="rgba(255,255,255,0.8)"/>
        </View>
        </ImageBackground>
        <View style={styles.container}>
        <DrawerNavigatorItems {...props}/>
      {/*<TouchableOpacity><Text>LogoutLogout</Text></TouchableOpacity>*/}
        </View>

    </ScrollView>
    )
}

const styles = StyleSheet.create({

    container:{
        flex:1,
    },
    profile:{
        width:80,
        height:80,
        borderRadius: 40,
        borderWidth: 3,
        borderColor: '#fff'
    },
    name:{
        color:"#fff",
        fontSize: 20,
        fontWeight: '800',
        marginVertical: 8 
    },
    followers:{
        color:"rgba(255,255,255,0.8)",
        fontSize: 13,
        marginRight: 4
    }

})

и вот мой Экран. js

import React from 'react'
import {View,Text,StyleSheet,SafeAreaView,TouchableOpacity} from 'react-native'
import {FontAwesome5} from '@expo/vector-icons'


export default class Screen extends React.Component
{

  render(){
    return (
        <View style={styles.container1}>
            <SafeAreaView style={{flex:1}}>
            <TouchableOpacity style={{alignItems: 'flex-start',margin: 16}} onPress={this.props.navigation.openDrawer}>

            <FontAwesome5 name="bars" size={24} color="#161924" />
            </TouchableOpacity>
            <View style={{flex:1,alignItems: 'center',justifyContent: 'center' }}>
                <Text style={styles.text}>{this.props.name} Screen</Text>
            </View>
            </SafeAreaView>
        </View>
        )
  }

}

const styles = StyleSheet.create({
    container1:{
        flex:1,
        backgroundColor: '#fff',
    marginTop:16
    },
    text:{
        color:"#161924",
        fontSize:20,
        fontWeight: '500' 
    }
})

и вот мой Индекс. js

import React from 'react'
import Screen from './Screen'
export const SidebarScreen = ({navigation}) => <Screen navigation ={navigation} name="Sidebar" />
export const ProfileScreen = ({navigation}) => <Screen navigation ={navigation} name="Profile" />
export const MessageScreen = ({navigation}) => <Screen navigation ={navigation} name="Message" />
export const ActivityScreen = ({navigation}) => <Screen navigation ={navigation} name="Activity" />
export const ListScreen = ({navigation}) => <Screen navigation ={navigation} name="List" />
export const ReportScreen = ({navigation}) => <Screen navigation ={navigation} name="Report" />
export const StatisticScreen = ({navigation}) => <Screen navigation ={navigation} name="Statistic" />
export const SignOutScreen = ({navigation}) => <Screen navigation ={navigation} name="Signout"  />

Я очень новичок, чтобы реагировать и не знаю, как go на другую страницу и показать содержимое, а также как выйти из системы