React native onPress React Native不使用React导航

我正在学习react native，正在测试stack navigator，这是我的主视图，但它不会重定向到下一个视图，单击项目时放置一个console.log，它也不会显示console.log，希望您能帮助我

这些是组件

Main

主要组件，在app.js中呈现

import React, { Component } from "react";

import Menu from "./MenuComponent";
import DishDetail from "./DishDetailComponent";

import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";

const Stack = createStackNavigator();

class Main extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerStyle: {
              backgroundColor: "#512DA8",
            },
            headerTintColor: "#fff",
            headerTitleStyle: {
              color: "#fff",
            },
          }}
          initialRouteName="Menu"
        >
          <Stack.Screen name="Menu" component={Menu} />
          <Stack.Screen name="DishDetail" component={DishDetail} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

export default Main;

import React，{Component}来自“React”；
从“/MenuComponent”导入菜单；
从“/DishDetailComponent”导入DishDetail；
从“@react navigation/stack”导入{createStackNavigator}；
从“@react-navigation/native”导入{NavigationContainer}”；
const Stack=createStackNavigator（）；
类主扩展组件{
render（）{
返回(
);
}
}
导出默认主；

菜单

这是菜单组件，它在开头呈现，应该显示console.log

import React, { Component } from "react";
import { View, FlatList } from "react-native";
import { ListItem, Avatar } from "react-native-elements";
import { NavigationContainer } from "@react-navigation/native";

import { DISHES } from "../shared/dishes";

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dishes: DISHES,
    };
  }

  render() {

    const { navigate } = this.props.navigation;

    const renderMenuItem = ({ item }) => {
      console.log("Render Menu Item");
      return (
        <View>
          <ListItem
            key={item.id}
            onPress={() => {
              // navigate("Dishdetail", { dishId: item.id });
              console.log("click");
            }}
          >
            <Avatar rounded source={require(`./images/uthappizza.png`)} />
            <ListItem.Content>
              <ListItem.Title>{item.name}</ListItem.Title>
              <ListItem.Subtitle>{item.description}</ListItem.Subtitle>
            </ListItem.Content>
          </ListItem>
        </View>
      );
    };

    return (
      <FlatList
        data={this.state.dishes}
        renderItem={renderMenuItem}
        keyExtractor={(item) => item.id.toString()}
      />
    );
  }
}

export default Menu;

import React，{Component}来自“React”；
从“react native”导入{View，FlatList}；
从“react native elements”导入{ListItem，Avatar}；
从“@react-navigation/native”导入{NavigationContainer}”；
从“./shared/disks”导入{disks}；
类菜单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
菜：菜，
};
}
render（）{
const{navigate}=this.props.navigation；
const renderMenuItem=（{item}）=>{
console.log（“渲染菜单项”）；
返回(
{
//导航（“Dishdetail”，{dishId:item.id}）；
控制台日志（“单击”）；
}}
>
{item.name}
{item.description}
);
};
返回(
item.id.toString（）}
/>
);
}
}
导出默认菜单；