如何在另一个嵌套屏幕中显示嵌套屏幕？

Question

我的应用目前设置如下，我想在用户按下 Study 时显示 Hub 屏幕：

App.js:

import React, { Component } from 'react';

...

import { View } from 'react-native'

import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './redux/reducers'
import thunk from 'redux-thunk'
const store = createStore(rootReducer, applyMiddleware(thunk))

...

export class App extends Component {
  
...
render() {
    return (
      <Provider store={store}>
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Main">
            <Stack.Screen name="Main" component={MainScreen} options={{ headerShown: false }}/>
          </Stack.Navigator>
        </NavigationContainer>
      </Provider>
    )
  }
}

export default App

Main:

import React, { Component } from 'react'
import { View } from 'react-native'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchUser, clearData } from '../redux/actions/index'

import ProfileScreen from './main/Profile'
import HomeScreen from './main/Home'
import StudyScreen from './main/Study'
import TestScreen from './main/Test'

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'
const Tab = createMaterialBottomTabNavigator();
// https://reactnavigation.org/docs/bottom-tab-navigator/

export class Main extends Component {
    componentDidMount() {
        this.props.clearData();
        this.props.fetchUser();
    }
    render() {
        
    ...

        return (
            <Tab.Navigator initialRouteName="Home" activeColor="#f0edf6" barStyle={{ backgroundColor: '#694fad' }} shifting='true'>
                <Tab.Screen name="Home" component={HomeScreen}
                options={{
                    tabBarLabel: 'Home', tabBarColor: '#FF6347', tabBarIcon: ({ color, size }) => (
                        <MaterialCommunityIcons name="home" color={color} size={26}/>
                    ),
                }} />
                <Tab.Screen name="Study" component={StudyScreen}
                options={{
                    tabBarLabel: 'Study', tabBarColor: '#694FAD', tabBarIcon: ({ color, size }) => (
                        <MaterialCommunityIcons name="school" color={color} size={26}/>
                    ),
                }} />
                <Tab.Screen name="Profile" component={ProfileScreen}
                options={{
                    tabBarLabel: 'Profile', tabBarColor: '#1F65FF', tabBarIcon: ({ color, size }) => (
                        <MaterialCommunityIcons name="account" color={color} size={26}/>
                    ),
                }} />
                <Tab.Screen name="Test" component={TestScreen}
                options={{
                    tabBarLabel: 'Test', tabBarColor: '#3490AA', tabBarIcon: ({ color, size }) => (
                        <MaterialCommunityIcons name="history" color={color} size={26}/>
                    ),
                }} />
            </Tab.Navigator>
        )
    }
}

const mapStateToProps = (store) => ({
    currentUser: store.userState.currentUser
})
const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser, clearData}, dispatch)

export default connect(mapStateToProps, mapDispatchProps)(Main);

Study:

import React, { Component } from 'react'

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

import HubScreen from './studyWebviews/Hub'

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

Hub:

import React from 'react'
import { Text } from 'react-native'

export default function Hub() {

    return (
        <Text>Hub</Text>
    )
}

尝试加载我的应用程序时出现此错误：

× Error: 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.

我该如何解决这个问题？如果我需要澄清任何内容或为了可读性而进行任何更改，请告诉我，谢谢。

Answer 1

我认为您导入的组件不正确，如消息所示：“...或在导入时混淆了默认导入和命名导入。”

尝试export default class Study...

如何在另一个嵌套屏幕中显示嵌套屏幕？

How to display a nested screen within another nested screen?

javascript

react-native

redux

react-native-navigation