React native TypeError:取消定义不是对象（正在计算--）_React Native_Navigation_Undefined_React Navigation_Typeerror

React native TypeError:取消定义不是对象（正在计算--）

react-native navigation

React native TypeError:取消定义不是对象（正在计算--）,react-native,navigation,undefined,react-navigation,typeerror,React Native,Navigation,Undefined,React Navigation,Typeerror,我刚开始使用React Native，但不幸的是，我在导航方面被困了两周。我只想从一个屏幕导航到另一个屏幕，但都是徒劳的。就像Android Studio中的意图一样。所以我使用的是Menu_List.js，我有3个类别的比萨饼，汉堡，奶昔。当我点击比萨饼时，它会进入比萨饼的详细信息。我正在使用TouchOpacity onpress{}作为导航屏幕。我没有使用App.js，我在底部导航器中有菜单列表屏幕。虽然当我把整个代码放在App.js中时，它可以工作，但当Menu\u List.js显示错

我刚开始使用React Native，但不幸的是，我在导航方面被困了两周。我只想从一个屏幕导航到另一个屏幕，但都是徒劳的。就像Android Studio中的意图一样。所以我使用的是Menu_List.js，我有3个类别的比萨饼，汉堡，奶昔。当我点击比萨饼时，它会进入比萨饼的详细信息。我正在使用TouchOpacity onpress{}作为导航屏幕。我没有使用App.js，我在底部导航器中有菜单列表屏幕。虽然当我把整个代码放在App.js中时，它可以工作，但当Menu\u List.js显示错误时

下面是代码和错误

菜单列表.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);
}}
/>;

/**
 * @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);

导航服务

// 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,
};

Index.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);
}}
/>;

/**
 * @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);

/**
*@格式
*/
从“react native”导入{AppRegistry}；
从“./App”导入应用程序；
从“React”导入React，{Component}
从“./app.json”导入{name as appName}；
从“./src/screens/Index\u screens/Bottom\u Navigator”导入主屏幕
从“./src/screens/Index\u screens/Bottom\u Navigator”导入ProfileScreen
从“/src/screens/Splash”导入飞溅
从“./src/screens/Menu\u List/Menu\u List”导入菜单列表
//从“./src/Navigators/Bottom\u Navigator”导入底部导航器
类主扩展组件{
建造师（道具）{
超级（道具）；
this.state={currentScreen:'Splash'}；
log（'开始执行一些任务大约3秒钟'）
设置超时（（）=>{
console.log（'完成一些任务大约3秒钟'）
this.setState（{currentScreen:'HomeScreen'}）
}, 3000)
}
render（）{
const{currentScreen}=this.state
让mainScreen=currentScreen==‘飞溅’？：
返回主屏幕
}
}
AppRegistry.registerComponent（appName，（）=>Main）；

*比萨饼详细信息

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',        
    }
})

import React，{Component}来自“React”
从“react native”导入{样式表、文本、视图、图像}
导出默认类Pizza\u组件{
render（）{
返回(
当妈妈不做饭的时候
)
}
} 
const styles=StyleSheet.create({
容器：{
背景颜色：“白色”，
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
},
标题：{
fontWeight:'粗体'，
尺码：18，
颜色：'黑色'，
fontStyle:'斜体'，
}
})

错误说明一切，\u导航器未定义。您的问题中只有一个导航器变量，它位于导航服务文件中。是的，导航器未在导航服务文件中定义