Question

路线“ 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>);
  }
}

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

Answer 1

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

尝试一下：

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

Answer 2

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

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

import  FeedScreen  from  '../screens/FeedScreen'

Answer 3

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

import Component from 'defaultexport'

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

3 个答案: