React native 如何嵌套堆栈导航器、底部选项卡导航器和抽屉导航器？_React Native_React Native Navigation_React Navigation V5_React Navigation Drawer_React Navigation Bottom Tab

React native 如何嵌套堆栈导航器、底部选项卡导航器和抽屉导航器？

react-native

React native 如何嵌套堆栈导航器、底部选项卡导航器和抽屉导航器？,react-native,react-native-navigation,react-navigation-v5,react-navigation-drawer,react-navigation-bottom-tab,React Native,React Native Navigation,React Navigation V5,React Navigation Drawer,React Navigation Bottom Tab,我一直在尝试将堆栈导航器嵌套在底部选项卡导航器中，它已嵌套到抽屉导航器中。在嵌套方面，底部选项卡导航器位于顶部，然后是底部选项卡导航器，最后是堆栈导航器。我这样做是为了我的底部选项卡导航器出现在一些屏幕上，我的抽屉出现在所有屏幕上。我创建stacknavigator是为了设计标题，这在其他导航器中是不可能的但我一直无法做到这一点。我的代码运行正常，没有任何错误，但作为输出，出现空白屏幕。我无法获得所需的输出，程序没有显示任何错误这是App.js。它包含抽屉导航器 App.js import

我一直在尝试将堆栈导航器嵌套在底部选项卡导航器中，它已嵌套到抽屉导航器中。在嵌套方面，底部选项卡导航器位于顶部，然后是底部选项卡导航器，最后是堆栈导航器。我这样做是为了我的底部选项卡导航器出现在一些屏幕上，我的抽屉出现在所有屏幕上。我创建stacknavigator是为了设计标题，这在其他导航器中是不可能的

但我一直无法做到这一点。我的代码运行正常，没有任何错误，但作为输出，出现空白屏幕。我无法获得所需的输出，程序没有显示任何错误

这是App.js。它包含抽屉导航器

App.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>
);

import React from 'react';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Icon from 'react-native-ionicons';

import WhatsUpstack from './WhatsUpscreen';
import SyllabusStack from './SyllabusScreen';
import RecessStack from './RecessScreen';

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

export default 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>
);

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

import DocDetails from './DocsScreen';
import ChatBox from './ChatBox';
import BottomTab from './BottomTab';

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

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

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',
  },
});

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',
  },
});

从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从“/DocsScreen”导入文档详细信息；
从“/SettingsScreen”导入设置；
从“/doutsScreen”导入doutsq；
从“/HelpScreen”导入帮助屏幕；
从“/BlockedScreen”导入阻止的内容；
从“/ProfileScreen”导入ProfileStack；
从“/WhatsUpscreen”导入WhatsUpstack；
从'@react导航/drawer'导入{createDrawerNavigator}；
const Drawer=createDrawerNavigator（）；
导出默认应用=（）=>（
);

这是我创建底部选项卡导航器的BottomTab.js。底部选项卡导航器中的所有组件都是堆栈组件，因此我的底部选项卡显示在堆栈的所有屏幕中

BottomTab.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>
);

import React from 'react';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Icon from 'react-native-ionicons';

import WhatsUpstack from './WhatsUpscreen';
import SyllabusStack from './SyllabusScreen';
import RecessStack from './RecessScreen';

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

export default 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>
);

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

import DocDetails from './DocsScreen';
import ChatBox from './ChatBox';
import BottomTab from './BottomTab';

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

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

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',
  },
});

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',
  },
});

从“React”导入React；
从“反应本机向量图标/材料通信图标”导入材料通信图标；
从“反应本机离子图标”导入图标；
从“/WhatsUpscreen”导入WhatsUpstack；
从“./CettleusScreen”导入SyttleusStack；
从“/RecessScreen”导入RecessStack；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
const Tab=createBottomTabNavigator（）；
导出默认底部选项卡=（）=>(
(), }}/>
(), }}/>
(), }}/>
);

这是WhatsUpScreen.js，我在这里导入了底部选项卡导航器。它还包含两个函数WhatsUp和WhatsUpStack

WhatsUpScreen.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>
);

import React from 'react';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Icon from 'react-native-ionicons';

import WhatsUpstack from './WhatsUpscreen';
import SyllabusStack from './SyllabusScreen';
import RecessStack from './RecessScreen';

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

export default 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>
);

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

import DocDetails from './DocsScreen';
import ChatBox from './ChatBox';
import BottomTab from './BottomTab';

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

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

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',
  },
});

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',
  },
});

从“世博会状态栏”导入{StatusBar}；
从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从'@react navigation/stack'导入{createStackNavigator}；
从“/DocsScreen”导入文档详细信息；
从“./ChatBox”导入聊天室；
从“./BottomTab”导入BottomTab；
函数WhatsUp（{navigation}）{
返回(
所有的聊天都将在这里进行
);
}
const Stack=createStackNavigator（）；
导出默认函数WhatsUpstack（）{
报税表（
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

这是RecessScreen.js，它将包含两个函数RecessStack和Recess

RecessScreen.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>
);

import React from 'react';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Icon from 'react-native-ionicons';

import WhatsUpstack from './WhatsUpscreen';
import SyllabusStack from './SyllabusScreen';
import RecessStack from './RecessScreen';

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

export default 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>
);

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

import DocDetails from './DocsScreen';
import ChatBox from './ChatBox';
import BottomTab from './BottomTab';

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

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

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',
  },
});

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',
  },
});

从“世博会状态栏”导入{StatusBar}；
从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从'@react navigation/stack'导入{createStackNavigator}；
函数休息室（{navigation}）{
返回(
所有的游戏都将存在于此！！
);
}
const Stack=createStackNavigator（）；
导出默认函数RecessStack（）{
报税表（
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

SyttalusScreen.js包含两个函数：Syttalus（）和SyttalusStack

提纲屏幕.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>
);

import React from 'react';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Icon from 'react-native-ionicons';

import WhatsUpstack from './WhatsUpscreen';
import SyllabusStack from './SyllabusScreen';
import RecessStack from './RecessScreen';

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

export default 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>
);

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

import DocDetails from './DocsScreen';
import ChatBox from './ChatBox';
import BottomTab from './BottomTab';

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

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

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',
  },
});

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',
  },
});

从“世博会状态栏”导入{StatusBar}；
从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从'@react navigation/stack'导入{createStackNavigator}；
从“/doutsScreen”导入doutsq；
功能教学大纲（{navigation}）{
返回(
所有疑问和教学大纲的细节都将存在于此！！！
);
}
const Stack=createStackNavigator（）；
导出默认函数
{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

react native是我的新手，请帮助我识别错误。同样的问题。已经做了好几天了，哈哈