React Navigation 嵌套Tab与Stack实现及Study组件导入报错解决

报错信息：Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'Study'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.

问题根源 #

• 导入导出模式不匹配
  Study.js使用命名导出语法定义Study组件，但Main.js是通过默认导入的方式引入Study页面组件。两种模式不匹配时，拿到的StudyScreen引用值为undefined，传递给Tab.Screen的component属性就会直接触发上述报错。
• 导航容器重复嵌套
  项目已经在App.js中为整个应用包裹了全局唯一的根NavigationContainer，按照React Navigation规则，整个应用仅需一个根导航容器管理全局导航状态。在Study页面内部再单独嵌套一个NavigationContainer，就算导入问题修复，也会触发导航上下文缺失的后续报错。Tab页对应的嵌套Stack导航，不需要额外包裹独立导航容器，直接返回Stack导航结构即可。

修复操作 #

1. 不改动Main.js的现有导入逻辑，直接调整Study.js的导出规则，补充默认导出匹配导入写法。
2. 移除Study.js内冗余的导航容器代码，删掉NavigationContainer的导入和包裹标签，直接返回Stack导航组件。
3. 修正后的Study.js完整代码：

import React, { Component } from 'react'
import { createStackNavigator } from '@react-navigation/stack';
import HubScreen from './studyWebviews/Hub'

const Stack = createStackNavigator();

export class Study extends Component {
    render() {
        return (
            <Stack.Navigator initialRouteName="Hub">
                <Stack.Screen name="Hub" component={HubScreen} options={{ headerShown: false }}/>
            </Stack.Navigator>
        );
    }
}

export default Study

修复完成后，点击底部Tab栏的Study标签，会正常加载Study下的嵌套Stack导航，因为Stack初始路由设置为Hub，会直接展示Hub页面内容。

内容的提问来源于Stack Exchange，提问作者KLG