0

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

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

截屏

这是我的代码

应用程序.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
  },
});
4

3 回答 3

3

您必须在调用它们之前声明所有组件，例如在从堆栈调用选项卡导航之前，您必须首先声明选项卡 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 },
});

这应该工作

于 2018-05-16T08:06:47.783 回答
0

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

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

于 2018-07-28T22:31:55.410 回答
0

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

于 2018-05-16T06:35:43.600 回答