代码之家  ›  专栏  ›  技术社区  ›  illya

路由的组件必须是React组件

  •  1
  • illya  · 技术社区  · 5 年前

    路由“Feed”的组件必须是React组件。

    我在这里检查了大多数其他类似的问题,但大多数问题都是由于基本语法造成的(可能我也检查过,但我对此视而不见!)。我已经删除了与此问题无关的代码块(navigationOptions和其他屏幕),并且仍然可以通过以下方式重现错误:

    import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
    import { FeedScreen } from '../screens/FeedScreen';
    
    const FeedStack = createStackNavigator({
      Feed: FeedScreen,
    });
    
    const DashboardTabNavigator = createBottomTabNavigator(
      {
        FeedStack
      }
    );
    
    const DashboardStackNavigator = createStackNavigator(
      {
        DashboardTabNavigator: DashboardTabNavigator
      }
    );
    
    const AppContainer = createAppContainer(DashboardStackNavigator);
    
    export default AppContainer;
    

    ./屏幕/DashboardScreen.js

    import React, { Component } from 'react';
    import { StyleSheet } from 'react-native';
    import AppContainer from '../navigators/AppNavigator';
    
    class DashboardScreen extends Component {
      render() {
        return (
          <AppContainer />
        );
      }
    }
    
    export default DashboardScreen;
    

    ./屏幕/FeedScreen.js

    import React from 'react';
    import { View } from 'react-native';
    
    export default class FeedScreen extends React.Component {
      render() {
        return (
        <View>
        </View>);
      }
    }
    

    3 回复  |  直到 5 年前
        1
  •  1
  •   Hend El-Sahli    5 年前

    您有FeedScreen的默认导出。。。非命名导出:

     import  FeedScreen  from '../screens/FeedScreen';
    
        2
  •  1
  •   CraftyMonkey    5 年前
    import  { FeedScreen }  from  '../screens/FeedScreen'
    

    如果默认情况下正在导出,则不能这样导入。 删除默认导出或按以下方式替换导入:

    import  FeedScreen  from  '../screens/FeedScreen'
    
        3
  •  1
  •   Dupocas    5 年前

    您正在使用 export default 语句,这意味着您不能像那样导入,您应该提供一个变量来存储组件。

    import Component from 'defaultexport'