Question

我试图制作可以导航到TabNavigator的StackNavigator。但是有一个错误说; ＆＃34;路由组件必须是React组件＆＃34;。

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

这是我的代码

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
  },
});

Answer 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 },
});

这应该有效

Answer 2

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

Answer 3

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

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

React Native - 堆栈导航和TabNavigation（路由的组件必须是React组件）

3 个答案: