react-native - 如何解决错误导航器只能包含“屏幕”组件作为其直接子级（找到“;”）？

问题描述

我一直在尝试嵌套抽屉导航器、底部标签导航器和堆栈导航器。我收到两个相同的错误：

导航器只能包含“屏幕”组件作为其直接子级（找到“;”）。要在导航器中呈现此组件，请将其在“组件”道具中传递给“屏幕”。

此错误位于：

 in StackNavigator (at WhatsUpscreen.js:27)
    in WhatsUpstack (at SceneView.tsx:122)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at ResourceSavingScene.tsx:68)
    in RCTView (at View.js:34)
    in View (at ResourceSavingScene.tsx:63)
    in ResourceSavingScene (at DrawerView.tsx:203)
    in RCTView (at View.js:34)
    in View (at src/index.native.js:123)
    in ScreenContainer (at DrawerView.tsx:182)
    in RCTView (at View.js:34)
    in View (at Drawer.tsx:625)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:240)
    in AnimatedComponent(View) (at Drawer.tsx:618)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:240)
    in AnimatedComponent(View) (at Drawer.tsx:608)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Drawer.tsx:599)
    in DrawerView (at DrawerView.tsx:235)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at DrawerView.tsx:233)
    in RCTView (at View.js:34)
    in View (at DrawerView.tsx:232)
    in DrawerView (at createDrawerNavigator.tsx:47)
    in DrawerNavigator (at App.js:19)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at App.js:18)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

我一直在尝试解决错误但无法解决。

这是 App.js，我在其中编写了抽屉导航器的代码。WhatsUpstack 和 ProfileStack 是两个堆栈，而其他组件是普通屏幕组件。

应用程序.js

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


import DocDetails from './DocsScreen';
import Settings from './SettingsScreen';
import DoubtsQ from './DoubtsScreen';
import HelpScreen from './HelpScreen';
import Blocked from './BlockedScreen';
import ProfileStack from './ProfileScreen';
import WhatsUpstack from './WhatsUpscreen';
import { createDrawerNavigator } from '@react-navigation/drawer';


const Drawer = createDrawerNavigator();

export default App=() => ( 
<NavigationContainer>
    <Drawer.Navigator initialRouteName="WhatsUp" drawerPosition="right" > 
        <Drawer.Screen name="WhatsUp" component={WhatsUpstack} options= {{ title:'Main Screen'}} />
        <Drawer.Screen name="Your Profile" component={ProfileStack}/>
        <Drawer.Screen name="Docs" component={DocDetails} options= {{ title:'Your Documents'}} />
        <Drawer.Screen name="Doubts" component={DoubtsQ} options= {{ title:'Your Doubts'}} />
        <Drawer.Screen name="Block" component={Blocked} options= {{ title:'Blocked Details'}} />
        <Drawer.Screen name="Help" component={HelpScreen}/>
        <Drawer.Screen name="Settings" component={Settings}/>
    </Drawer.Navigator>
  </NavigationContainer>
);

这是 WhatsUpScreen.js，我在其中编写了底部选项卡导航器的代码。WhatsUpStack、SyllabusStack 和 RecessStack 是底部选项卡导航器中使用的堆栈。WhatsUpStack 在 WhatsUpScreen.js 中创建了 WhatsUp 函数。

WhatsUpScreen.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Icon from 'react-native-ionicons';

import DocDetails from './DocsScreen';
import ChatBox from './ChatBox';
import SyllabusStack from './SyllabusScreen';
import RecessStack from './RecessScreen';

function WhatsUp({navigation}) {
  return (
    <View style={styles.container}>
      <Text>All the chats will take place here</Text>
      <StatusBar style="auto" />
      <BottomTab/>
    </View>
  );
}

const Stack= createStackNavigator();

export default function WhatsUpstack() {
  return ( 
            <Stack.Navigator>
              <Stack.Screen name="WhatsUp" component={WhatsUp}/>
              <Stack.Screen name= "Docs" component={DocDetails} />
              <Stack.Screen name= "Sample" component={ChatBox} />;
            </Stack.Navigator>
  );
}

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

BottomTab=() => (
  <Tab.Navigator initialRouteName="WhatsUp"  tabBarOptions={{ activeTintColor: '#e91e63', }} >
    <Tab.Screen name="WhatsUp" component={WhatsUpstack} options={{ tabBarLabel: 'WhatsUp', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="wechat" color={"#000000"} size={30} />), }}/>
    <Tab.Screen name="Syllabus" component={SyllabusStack} options={{ tabBarLabel: 'Syllabus', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="book-open-page-variant" color={"#000000"} size={30} />), }}/>
    <Tab.Screen name="Recess" component={RecessStack} options={{ tabBarLabel: 'Recess', tabBarIcon: ({ color, size}) => (<Icon name="game-controller" color={"#0000FF"} size={30} />), }}/>
  </Tab.Navigator>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这是 SyllabusScreen.js，其中 SyllabusStack 是使用两个普通函数 Syllabus 和 DoubtsQ 创建的。

教学大纲屏幕.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

import DoubtsQ from './DoubtsScreen';

function Syllabus({navigation}) {
  return (
    <View style={styles.container}>
      <Text>All the details for doubts and syllabus will exist here!!!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const Stack= createStackNavigator();

export default function SyllabusStack()
{
  return(
          <Stack.Navigator>
            <Stack.Screen name="Syllabus-wise video links" component={Syllabus}/>
            <Stack.Screen name="Doubts" component={DoubtsQ}/>
          </Stack.Navigator>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这是 RecessScreen.js，其中创建了 RecessStack 和 Recess 函数。RecessStack 具有唯一的一个组件，即功能 Recess。

RecessScreen.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

function Recess({navigation}) {
  return (
    <View style={styles.container}>
      <Text>All the games will exist here!!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const Stack= createStackNavigator();

export default function RecessStack() {
  return ( 
            <Stack.Navigator>
              <Stack.Screen name="Games" component={Recess}/>
            </Stack.Navigator>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

上面代码中用到的所有函数都是普通函数

例如：

DoubtsScreen.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function DoubtsQ() {
  return (
    <View style={styles.container}>
      <Text>All doubts will exist here!!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

所有功能都遵循相同的格式。

这是为了在我从抽屉导航器中删除 WhatsUpStack 和 ProfileStack 时通知您。它完美地发挥作用，产生完美的结果。一旦我包含这两个堆栈，它就会开始显示我上面提到的错误。

标签： react-nativenavigation-drawerreact-native-navigationreact-navigation-drawerreact-navigation-bottom-tab

react-native - 如何解决错误导航器只能包含“屏幕”组件作为其直接子级（找到“;”）？

问题描述

解决方案

推荐阅读