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

Question

我正在尝试制作一个可以导航到TabNavigator的StackNavigator。但是有一个错误说;" 路由的组件必须是 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
},
});

Answer 1

在从堆栈调用选项卡导航之前，您必须声明所有组件，然后再调用它们进行检查 您必须声明选项卡常量 首先查看下面的代码

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

问题可能是由于反应导航版本 2 的更新 API。TabNavigator 和 StackNavigator 应该替换为 createTabNavigator 和 createStackNavigator。我在观看教程时犯了同样的错误。

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