路由路由器的组件必须是React组件

Question

我遇到此错误，指出路线“ router”的组件必须是React组件。无法检查哪一行显示错误。 任何建议，谢谢

App Navigator类

 import { createStackNavigator } from 'react-navigation-stack'
    import Login from './src/Login';
    import Fruits from './src/Fruits';
    import FruitZoom from './src/FruitZoom';

    const AppNavigator = createStackNavigator({
      Login: { screen:Login},
      Fruits: { screen: Fruits},
      FruitZoom: { screen: FruitZoom}
    }, {
      initialRouteName: 'Login',
      headerMode: 'none'
    });

    export default createStackNavigator(AppNavigator);

这是在应用程序中使用的通用代码，因此请帮助我解决此问题以及该行显示错误。谢谢

Answer 1

问题与您在App Navigator文件中进行的导出有关。只需导出StackNavigator即可：

function setStyleAttributes(attrs: { [ k in keyof ( CSSStyleDeclaration & CSSTransformsAttr )]?: any }): void {
    if (attrs !== undefined) {
            Object.keys(attrs).forEach((key: string) => {
                /// how to check if 'key' is from the CSSTransfomsAttr not CSSStyleDeclaration ?
                /// ...
            this.htmlElement.style[key]=  attrs[key]; // (1) if key in keyof CSSStyleDeclaration
        });
    }
}

Answer 2

更新＃1：

您可能需要考虑以下问题：

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Login from './src/Login';
import Fruits from './src/Fruits';
import FruitZoom from './src/FruitZoom';

const AppNavigator = createStackNavigator({
  Login: { screen: Login },
  Fruits: { screen: Fruits},
  FruitZoom: { screen: FruitZoom}
}, {
  initialRouteName: 'Login',
  headerMode: 'none'
});

export default createAppContainer(AppNavigator);

您可能要运行安装react-navigation库，因为它没有被列为react-navigation-stack的依赖项：

yarn add react-navigation
# or with npm
# npm install react-navigation

As from this.

---

原始答案：

从react-navigation-stack的文档开始，这是createStackNavigator方法的基本用法：

import { createStackNavigator } from 'react-navigation-stack';

export default createStackNavigator({
  Inbox: InboxScreen
  Drafts: DraftsScreen,
}, {
  initialRouteName: 'Inbox',
});

您在代码中的位置进行了两次操作，位于：const AppNavigator = createStackNavigator({.....})，也可以在export default createStackNavigator(AppNavigator)中将以下内容替换为：

 import { createStackNavigator } from 'react-navigation-stack'
    import Login from './src/Login';
    import Fruits from './src/Fruits';
    import FruitZoom from './src/FruitZoom';

    const AppNavigator = createStackNavigator({
      Login: { screen:Login},
      Fruits: { screen: Fruits},
      FruitZoom: { screen: FruitZoom}
    }, {
      initialRouteName: 'Login',
      headerMode: 'none'
    });

    export default AppNavigator;