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

问题描述

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

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

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

× 错误：找不到屏幕“Study”的“component”、“getComponent”或“children”道具。如果您传递了“未定义”，则可能会发生这种情况。您可能忘记从定义组件的文件中导出组件，或者在导入时混淆了默认导入和命名导入。

我该如何解决？为了便于阅读，如果我需要澄清任何内容或进行任何更改，请告诉我，谢谢。

标签： javascriptreact-nativereduxreact-native-navigation

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

问题描述

解决方案

推荐阅读