用于路由的组件必须是React组件

时间:2019-04-02 22:06:23

标签: reactjs react-native expo

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

我在这里检查了大多数其他类似的问题,但是其中大多数是由于基本语法(也许我也有,但是是盲目的!)。我删除了与该问题无关的代码块(navigationOptions和其他屏幕),并且仍然可以通过以下代码重现该错误:

./ navigators / AppNavigator.js

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;

./ screens / 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;

./ screens / FeedScreen.js

import React from 'react';
import { View } from 'react-native';

export default class FeedScreen extends React.Component {
  render() {
    return (
    <View>
    </View>);
  }
}

知道我在这里做错了什么吗?

3 个答案:

答案 0 :(得分:1)

您具有FeedScreen的默认导出...而不是命名的导出:

尝试一下:

 import  FeedScreen  from '../screens/FeedScreen';

答案 1 :(得分:1)

import  { FeedScreen }  from  '../screens/FeedScreen'

如果默认情况下重新导出,则无法像这样导入。 删除默认的导出或像这样替换您的导入:

import  FeedScreen  from  '../screens/FeedScreen'

答案 2 :(得分:1)

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

import Component from 'defaultexport'