如何将底部选项卡导航器与抽屉导航器结合使用

Question

我在代码下方的选项卡是底部选项卡导航器代码，我想通过在app.js上呈现它来在每个屏幕上显示它，就像我为抽屉导航器所做的那样（简单来说，我想在屏幕上调用底部选项卡导航器）

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
let user1=""
let data=""
export function DrwaerNav(props) {


  
  if(props.route.params!=undefined){

    console.log('props arent undefined')


    
   
 user1=props.route.params.user.auth
 data=props.route.params.user.auth


  }


  return (

      <Drawer.Navigator initialRouteName="homeS"  drawerContent={(props) => <DrawerContent props={props} data={user1}/>}
      
      screenOptions={{
        headerStyle:{
          backgroundColor:'transparent',
          },
        headerTintColor:'black',
        headerTitleStyle:{
          fontWeight:'bold',
        }
      }}
      >
 
        <Drawer.Screen name="complaints" component={complaints} 
        options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>

        <Drawer.Screen name="homeS" component={homeS} options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           {/* <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",fontSize:12,}}>{user1.email}</Text> */}
            <TouchableOpacity 
            onPress={()=>{
              props.navigation.navigate('Profile',data={data})
              }
            }>

            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />
            </TouchableOpacity>
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>
        <Drawer.Screen name="Updates" component={updates} 
        
        options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>
        <Drawer.Screen name="userComplaints" component={userComplaints} 
        
        options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>
        <Drawer.Screen name="GuestReg" component={Guest} 
       options={{
        title:'Home',
        headerTitleAlign:'left',
        headerRight:()=>(
          <View style={{marginEnd:10,flexDirection:'row'}}> 
         <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
          <Avatar.Image 
          source={{   uri:base64.decode(user1.avatar)}} 
          size={40}
          />
{/* <Text>Email:{user1.email}</Text> */}
          </View>
        ),
      }}/>
        <Drawer.Screen name="myGuests" component={myGuest} 
        
        options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>
        <Drawer.Screen name="Updateguest" component={Updateguest} 
        
        options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />  
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>



<Drawer.Screen name="updateprofile" component={updateprofile} 
        
        options={{
          title:'Update Profile',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />  
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>


        <Drawer.Screen name="Profile" component={Profile}  />
        
       
      </Drawer.Navigator>

      
  );
}

我的抽屉导航器工作正常我想添加一个底部标签导航器，其代码如下：

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
     
      activeColor="#e91e63"
      barStyle={{ backgroundColor: 'tomato' }}
    >
      <Tab.Screen
        name="homes"
        component={DrwaerNav}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Updates"
        component={updates}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="bell" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      
    <Stack.Navigator initialRouteName="Login" screenOptions={{
        headerShown: false
      }}>
    {/* <Stack.Navigator initialRouteName="SignUp" headerShown="false"> */}
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="SignUp" component={SignUp} />
      <Stack.Screen name="dashboard" component={DrwaerNav} />  
    </Stack.Navigator>
    
    </NavigationContainer>
  );
}

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

Answer 1

请使用基本设置尝试以下代码

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { View, Text } from 'react-native'

const Stack = createStackNavigator()
const DrawerStack = createDrawerNavigator()
const BottomStack = createBottomTabNavigator()

// Drawer code
function AppDrawerStack() {
    return (
        <DrawerStack.Navigator drawerContent={props => <DrawerView {...props} />}>
            <DrawerStack.Screen name='AppBottomStack' component={AppBottomStack} />
        </DrawerStack.Navigator>
    )


}

function DrawerView() {
    return (
        <View>
            <Text>
                Drawer View
            </Text>
        </View>
    )
}

// Bottom Stack Part

function AppBottomStack() {
    return (
        <BottomStack.Navigator>
            <BottomStack.Screen
                name='BottomScreenOne'
                component={BottomScreenOne}

            />
            <BottomStack.Screen
                name='BottomScreenTwo'
                component={BottomScreenTwo}
            />
        </BottomStack.Navigator>
    )
}

function BottomScreenOne() {
    return (
        <View>
            <Text>
                BottomScreenOne
            </Text>
        </View>
    )
}

function BottomScreenTwo() {
    return (
        <View>
            <Text>
                BottomScreenTwo
            </Text>
        </View>
    )
}



export default function App() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="AppDrawerStack" component={AppDrawerStack} />
        </Stack.Navigator>
    )
}