React Native - Stack Navigation 和 TabNavigation（路由的组件必须是 React 组件）答案

【问题标题】：React Native - Stack Navigation and TabNavigation ( The component for route must be a React component )React Native - Stack Navigation 和 TabNavigation（路由的组件必须是 React 组件）
【发布时间】：2018-05-16 06:18:12
【问题描述】：

我正在尝试制作一个可以导航到 TabNavigator 的 StackNavigator。但是有一个错误说； “ route 的组件必须是 React 组件”。

TabNav 不是文件夹，我只想在用户登录后调用它。这样，标签将显示我认为。而且，我只是按照教程来做这个。对不起，伙计们，我只是一个新手。

Screenshot

这是我的代码

App.js

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

import Login from './components/Login';
import ManageOrder from './components/ManageOrder';
import SpecialOrder from './components/SpecialOrder';
import categories from './components/categories';

export default class App extends Component {
  render() {
    return (
      <RootNav />
    );
  }
}

const RootNav = StackNavigator({
  Login: {
    screen: Login,
  },
  TabNav: { screen: TabNav },

});

const TabNav = TabNavigator({
  categories: {
    screen: categories,
  },
  ManageOrder: {
    screen: ManageOrder
  },
  SpecialOrder: {
    screen: SpecialOrder
  },
});

【问题讨论】：

我建议注释掉所有路由，然后一次取消注释一个，直到找到导致问题的那个。

标签： android reactjs react-native react-native-navigation react-native-tabnavigator

【解决方案1】：

您必须在调用它们之前声明所有组件，例如在从堆栈调用选项卡导航之前，您必须首先声明选项卡 const，请参阅下面的代码

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

import categories from './components/categories';
import ManageOrder from './components/ManageOrder';
import SpecialOrder from './components/SpecialOrder';
import Login from './components/Login';

const TabNav = TabNavigator({
  categories: {
    screen: categories,
  },
  ManageOrder: {
    screen: ManageOrder
  },
  SpecialOrder: {
    screen: SpecialOrder
  },
});

const RootNav = StackNavigator({
  Login: {
    screen: Login,
  },
  TabNav: { screen: TabNav },
});

这应该可行

【讨论】：

我现在没有任何错误，但我没有看到任何选项卡导航。请帮忙。我只在顶部看到一个箭头，没有标签导航
因为您在 stacknavigator 中的默认初始路由是登录屏幕，因此在其中添加一些文本以及是否显示登录屏幕。我还建议在屏幕上添加一些控制台语句，以便在加载屏幕时您可以看到控制台并确保屏幕已加载
我将重新打开我的问题，因为有一个不同的问题。
@Violet 我建议将其标记为已回答并创建新问题，以便其他人也可以毫无疑问地获得相同类型问题的答案。

【解决方案2】：

我认为问题是您没有导出任何一个组件。请检查它

【讨论】：

【解决方案3】：

问题可能是由于 react-navigation 版本 2 的 API 更新所致。TabNavigator 和 StackNavigator 应替换为 createTabNavigator 和 createStackNavigator。我开始看教程时犯了同样的错误。

v2 API：https://reactnavigation.org/docs/en/hello-react-navigation.html

【讨论】：