React Native嵌套导航报错：路由组件必须为React组件

嗨，作为新手跟着教程踩这种坑太正常啦😉 你遇到的这个报错其实是个很典型的变量提升问题，咱们一步步来解决：

问题根源 #

你在代码里先定义了RootNav（StackNavigator），然后才定义TabNav（TabNavigator）。但JavaScript的变量提升规则是：变量声明会被提前，但赋值不会。所以当StackNavigator尝试读取TabNav的时候，它还只是个未赋值的undefined，系统自然就会报错说“路由对应的组件必须是React组件”了。从你提供的报错截图也能看出来，系统确实识别不到TabNav这个组件。

修复方案 #

只需要把TabNav的定义移到RootNav前面就好！这样当创建RootNav的时候，TabNav已经是一个完整的导航组件了。

修改后的完整代码：

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

// 先定义TabNav，让RootNav能找到它
const TabNav = TabNavigator({ 
  categories: { screen: categories },
  ManageOrder: { screen: ManageOrder },
  SpecialOrder: { screen: SpecialOrder },
}); 

// 再定义依赖TabNav的RootNav
const RootNav = StackNavigator({ 
  Login: { screen: Login },
  TabNav: { screen: TabNav },
}); 

新手小提示 #

• 组件命名尽量遵循大驼峰规范哦，比如把categories改成Categories，这是React的通用约定，能避免很多潜在的命名冲突~
• 注意你用的是react-navigation的旧版本（v1-v2），现在官方已经更新到v6版本了，API变化挺大的，如果后续跟着新教程学习的话，建议升级到最新版，能获得更好的文档支持和性能优化。

内容的提问来源于stack exchange，提问作者Violet