Ошибка типа: undefine не является объектом (оценивает--)

Question

Я только начинаю работать над React-Native, но, к сожалению, застрял в Navigation на 2 недели. Я хочу просто переходить с одного экрана на другой, но все напрасно. Так же, как намерение в Android Studio. Поэтому я использую Menu_List. js там у меня есть 3 категории Pizza, Burger, Shakes. Когда я нажимаю на Pizza, это будет go для Pizza_Details. Я использую TouchOpacity onpress {} для навигации по экрану. Я не использую приложение. js У меня есть экран Menu_List в Bottom_Navigator. Хотя, когда я помещаю весь код в приложение. js, он работает, но когда Menu_List. js, он показывает ошибку.

Follow is Code и ошибка

Menu_List. js

import { Text,StyleSheet, View, ScrollView, Dimensions, Image,TouchableOpacity,Alert } from "react-native";
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-cards';
import  {createAppContainer}  from 'react-navigation';
import  {createStackNavigator}  from 'react-navigation-stack';
import { withNavigation } from 'react-navigation';
import Burgers_Deals from './deals/burgers/burgers_deals'
import Shakes_Deals from './deals/shakes/shakes_deals'
import Pizza_Deals from './deals/pizza/pizza_deals'
import Navigation_Root from '../../Navigators/Navigation_Root'
import Navigation_Service from '../../Navigators/Navigation_Service'


import {AppRegistry} from 'react-native';
import { exp } from "react-native-reanimated";
export  default class Menu_List extends React.Component {

  render(){



        return(
          // const{navigate} =this.props.navigation;
            <View style={{ height: "100%", width: "100%" }}>

            <ScrollView>
            <TouchableOpacity onPress={() => Navigation_Service.navigate(Pizza_Deals)}>


 <Card >
    <CardImage 
      source={{uri: 'https://i.pinimg.com/originals/1a/4e/63/1a4e634088a4fd70c0b1293700cdc692.jpg'}} 

    />

    <CardContent text="PIZZA" />
    <CardAction 
      separator={true} 
      inColumn={false}>
    </CardAction>
  </Card>
  </TouchableOpacity>
  <TouchableOpacity>
 <Card>
    <CardImage 
      source={{uri: 'https://www.foxvalleyfoodie.com/wp-content/uploads/2018/04/grilled-burger-recipe.jpg'}} 
      />
    <CardContent text="BURGERS" />
    <CardAction 
      separator={true} 
      inColumn={false}>
    </CardAction>
  </Card>
  </TouchableOpacity>
  <TouchableOpacity onPress={( {navigate}) => {alert('HELLO')}}>
  <Card>
    <CardImage 
      source={{uri: 'https://c4.wallpaperflare.com/wallpaper/845/896/940/chocolate-strawberry-cocktail-wallpaper-preview.jpg'}} 
      />
    <CardContent text="SHAKES" />
    <CardAction 
      separator={true} 
      inColumn={false}>
    </CardAction>
  </Card>
  </TouchableOpacity>
</ScrollView>
</View>

        );
    }

}
// const RootStack = createStackNavigator(
//   {
//      Home: Menu_List,
//     Pizza: Pizza_Deals,
//     Burger:Burgers_Deals,
//     Shakes:Shakes_Deals,

//   },
//   {
//     initialRouteName: 'Home',
//   }
// );

// const AppContainer = createAppContainer(RootStack);
// export  class App extends React.Component {
//   render() {
//     return <AppContainer />;
//   }
// }



const styles = StyleSheet.create ({
  button: {
     backgroundColor: '#4ba37b',
     width: 100,
     borderRadius: 50,
     alignItems: 'center',
     marginTop: 100
  }
})
export const App=()=><Navigation_Root
ref={navigatorRef => {
  Navigation_Service.setTopLevelNavigator(navigatorRef);
}}
/>;

Navigation_ Root

import  {createAppContainer}  from 'react-navigation';
import  {createStackNavigator}  from 'react-navigation-stack';
import Burgers_Deals from '../screens/Menu_list/deals/burgers/burgers_deals'
import Shakes_Deals from '../screens/Menu_list/deals/shakes/shakes_deals'
import Pizza_Deals from '../screens/Menu_list/deals/pizza/pizza_deals'
import Menu_List from '../screens/Menu_list/Menu_List'
const optsNavigation={
    initialRouteName: Menu_List
}

const Navigation_Root = createStackNavigator({
    // Menu_List:Menu_List,
    Burgers_Deals:{screen:Burgers_Deals},
    Pizza_Deals:{screen:Pizza_Deals},
    Shakes_Deals:{screen:Shakes_Deals},
},optsNavigation);
// export  class NR extends Component{
//     render(){
//         return createAppContainer(Navigation_Root);
//     }
// }
export default createAppContainer(Navigation_Root);

Navigation_service

// NavigationService.js

import  NavigationActions from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};

Указатель. js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
 import App from './App';

import React, { Component } from 'react'


import {name as appName} from './app.json';

import HomeScreen from './src/screens/Index_screens/Bottom_Navigator'
import ProfileScreen from './src/screens/Index_screens/Bottom_Navigator'
import Splash from './src/screens/Splash'
import Menu_List from './src/screens/Menu_list/Menu_List'
// import Bottom_Navigator from './src/Navigators/Bottom_Navigator'

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = { currentScreen: 'Splash' };
        console.log('Start doing some tasks for about 3 seconds')
        setTimeout(()=>{
            console.log('Done some tasks for about 3 seconds')
            this.setState({ currentScreen: 'HomeScreen' })
        }, 3000)
    }
    render() {
        const { currentScreen } = this.state
        let mainScreen = currentScreen === 'Splash' ? <Splash /> : <HomeScreen/>
        return mainScreen
    }
}
AppRegistry.registerComponent(appName, () => Main);

* PIZZA_DETAILS

import React, { Component } from 'react'
import { StyleSheet, Text, View,Image } from 'react-native'
export default class Pizza_Deals extends Component {
    render() {
        return (
            <View style={styles.container}>

            <Image
               style={{width: 236, height: 177}}
            //   source={require('src/images/Logo_main.png')}
            source={{uri: 'https://media.istockphoto.com/photos/tasty-pepperoni-pizza-and-cooking-ingredients-tomatoes-basil-on-black-picture-id1083487948?k=6&m=1083487948&s=612x612&w=0&h=lK-mtDHXA4aQecZlU-KJuAlN9Yjgn3vmV2zz5MMN7e4='}}
            />
            <Text style={styles.title}>When Mom's not Cooking</Text>
            </View>
        )
    }
} 
const styles = StyleSheet.create({
    container: {

        backgroundColor: 'white',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        fontWeight: 'bold',
        fontSize: 18,
        color: 'black',
        fontStyle: 'italic',        
    }
})

ОШИБКА Экран