路由的组件必须是 React native expo 中的 react 组件错误答案

【问题标题】：The Component for route must be a react component error in React native expo路由的组件必须是 React native expo 中的 react 组件错误
【发布时间】：2019-07-24 17:57:14
【问题描述】：

我是原生反应新手，我试图将 reduxstore 连接到我的应用程序，以便我的菜单组件可以获取菜肴。我已经尝试了所有检查导出错误的方法，但我找不到路径丢失的地方。请帮助我卡住了

MenuComponent.js

import React, { Component } from "react";
import { FlatList } from "react-native";
import { Tile } from "react-native-elements";
import { connect } from "react-redux";
import { baseUrl } from "../shared/baseUrl";

const mapStateToProps = state => {
  return {
    dishes: state.dishes
  }
};

class Menu extends Component {
  static navigationOptions = {
    title: "Menu"
  };

  render() {
    const renderMenuItem = ({ item, index }) => {
      return (
        <Tile
          key={index}
          title={item.name}
          subtitle={item.description}
          featured
          onPress={() => navigate("Dishdetail", { dishId: item.id })}
          imageSrc={{ uri: baseUrl + item.image }}
        />
      );
    };

    const { navigate } = this.props.navigation;

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

export default connect(mapStateToProps)(Menu);

MainComponent.js

import React, { Component } from "react";
import Menu from "./MenuComponent";
import { DISHES } from "../shared/dishes";
import Dishdetail from "./DishdetailComponent";
import {
  View,
  Platform,
  StyleSheet,
  Image,
  ScrollView,
  Text
} from "react-native";
import {
  createStackNavigator,
  createDrawerNavigator,
  DrawerItems,
  SafeAreaView
} from "react-navigation";
import Home from "./HomeComponent";
import Contact from "./ContactComponent";
import About from "./AboutComponent";
import { Icon } from "react-native-elements";
import { connect } from "react-redux";
import {
  fetchDishes,
  fetchComments,
  fetchPromos,
  fetchLeaders
} from "../Redux/ActionCreators";

..... 
const MenuNavigator = createStackNavigator(
  {
    Menu: {
      screen: Menu,
      navigationOptions: ({ navigation }) => ({
        headerLeft: (
          <Icon
            name="menu"
            size={24}
            color="white"
            onPress={() => navigation.toggleDrawer()}
          />
        )
      })
    },
    Dishdetail: { screen: Dishdetail }
  },
  {
    initialRouteName: "Menu",
    navigationOptions: {
      headerStyle: {
        backgroundColor: "#512DA8"
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        color: "#fff"
      }
    }
  }
);
.....


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Main);

错误信息

The component for route 'Menu' must be a React component for example:

import MyScreen from './Myscreen'
...

Menu : Myscreen,
}

you can also use a navigator:

    import MyNavigator from './MyNavigator';
    ....
    Menu : MyNavigator
    }

    validateRouteConfigMap

    createStackNavigator

我不明白为什么菜单组件出错，因为我已成功导出它。该错误也与 createStackNavigator 有关，但我认为代码看起来不错，如果不是，那么我在做什么？

【问题讨论】：

您如何使用 MenuNavigator？
尝试用花括号导入：import { Menu } from "./MenuComponent";
我正在使用菜单导航器作为应用程序的主屏幕。
像这样的 {Menu} 导入不起作用。

标签： javascript reactjs react-native expo

【解决方案1】：

我认为您的屏幕设置不正确export default。

您能更改此代码吗？

const MenuNavigator = createStackNavigator(
  {
    Menu: {
      screen: () => <Menu />,

【讨论】：

我会试试这个