React native React Native-尝试在React navigation中使用选项卡导航器创建抽屉，而不呈现选项卡的抽屉项

我正在尝试创建一个应用程序，其中每个页面上都有一个抽屉和标签导航器。 我遵循了各种教程和react导航文档，但找不到解决方案

我已经创建了一个抽屉导航器，并在组件中放置了我的主选项卡导航器（我的选项卡导航器有多个堆栈-HomeStack、JointStack等）。不过，到目前为止还不错，当我导航到菜单中的主选项卡标签时，我返回到上次出现的同一屏幕，而不是我的主页顶部，尽管“initialRouteName”设置为“Home”

我决定离开它，但删除了标签，但它并没有完全删除它。它删除了文本，但仍有一个组件呈现在那里（请参见下面的图像1）

图1：

papernavigator.js

//imports and stuff

const Drawer = createDrawerNavigator();
  
  function MyDrawer({logout}) {

    const nav = useNavigation()

    return (
      <Drawer.Navigator
      initialRouteName={stackNavigationsConsts.HOME_STACK}
      drawerPosition="right"
      drawerContent={(props) => {
        return (
           <CustomDrawer nav={nav} drawerProps={props}/>
        )
      }}
      >
        <Drawer.Screen name={"בדיקה"} component={MainTabNavigator} options={{drawerLabel: () => null}}/>
        <Drawer.Screen name="מאמר" component={Article} />    
      </Drawer.Navigator>
    );
  }

//imports and stuff

const Tab = createBottomTabNavigator();

export default function MainTabNavigator() {
  return (
      <Tab.Navigator 
      initialRouteName={stackNavigationsConsts.HOME_STACK}
      
      tabBarOptions={{
        activeTintColor: mainColor.secondaryColor,
        inactiveTintColor: mainColor.text,
        activeBackgroundColor: mainColor.MainBackgroundColor,
        // activeBackgroundColor: mainColor.buttonPress,
        inactiveBackgroundColor: mainColor.MainBackgroundColor,
        keyboardHidesTabBar: true,
 
        
      }}
      
      >
        <Tab.Screen name={stackNavigationsConsts.HOME_STACK} component={HomeStackScreens} 
        options={{ 
          tabBarLabel: navigationConsts.HOME,
          tabBarIcon: ({ color, size }) => (
            homeIcon(color)
          ),
          }}
          />
          <Tab.Screen name={stackNavigationsConsts.PROFILE_STACK} component={AnotherStack2Screen} options={{ 
          tabBarLabel: navigationConsts.PROFILE ,
          tabBarIcon: ({ color, size }) => (
            profileIcon(color)
          ),
          }}/>
        <Tab.Screen name={stackNavigationsConsts.JOIN_STACK} component={JoinStackScreens} 
        options={{ 
          tabBarLabel: navigationConsts.JOIN ,
          tabBarIcon: ({ color, size }) => (
            JoinIcon(color)
          ),
          }}/>
        <Tab.Screen name={stackNavigationsConsts.NOTIFICATIONS_STACK} component={AnotherStackScreen} options={{ 
          tabBarLabel: navigationConsts.NOTIFICATIONS ,
          tabBarIcon: ({ color, size }) => (
            messagesIcon(color)
          ),
          tabBarBadge: 12
          }}/>
        <Tab.Screen name={stackNavigationsConsts.ADD_RIDE_STACK} component={AnotherStack1Screen} options={{ 
          tabBarLabel: navigationConsts.ADD_RIDE ,
          tabBarIcon: ({ color, size }) => (
            addRideIcon(color)
          ),
          }}/>
        
      </Tab.Navigator>
  );
}

//导入和其他东西
const Drawer=createDrawerNavigator（）；
函数MyDrawer（{logout}）{
const nav=useNavigation（）
返回(
{
返回(
)
}}
>
null}}/>
);
}

MainTabNavigator.js

//imports and stuff

const Drawer = createDrawerNavigator();
  
  function MyDrawer({logout}) {

    const nav = useNavigation()

    return (
      <Drawer.Navigator
      initialRouteName={stackNavigationsConsts.HOME_STACK}
      drawerPosition="right"
      drawerContent={(props) => {
        return (
           <CustomDrawer nav={nav} drawerProps={props}/>
        )
      }}
      >
        <Drawer.Screen name={"בדיקה"} component={MainTabNavigator} options={{drawerLabel: () => null}}/>
        <Drawer.Screen name="מאמר" component={Article} />    
      </Drawer.Navigator>
    );
  }

//imports and stuff

const Tab = createBottomTabNavigator();

export default function MainTabNavigator() {
  return (
      <Tab.Navigator 
      initialRouteName={stackNavigationsConsts.HOME_STACK}
      
      tabBarOptions={{
        activeTintColor: mainColor.secondaryColor,
        inactiveTintColor: mainColor.text,
        activeBackgroundColor: mainColor.MainBackgroundColor,
        // activeBackgroundColor: mainColor.buttonPress,
        inactiveBackgroundColor: mainColor.MainBackgroundColor,
        keyboardHidesTabBar: true,
 
        
      }}
      
      >
        <Tab.Screen name={stackNavigationsConsts.HOME_STACK} component={HomeStackScreens} 
        options={{ 
          tabBarLabel: navigationConsts.HOME,
          tabBarIcon: ({ color, size }) => (
            homeIcon(color)
          ),
          }}
          />
          <Tab.Screen name={stackNavigationsConsts.PROFILE_STACK} component={AnotherStack2Screen} options={{ 
          tabBarLabel: navigationConsts.PROFILE ,
          tabBarIcon: ({ color, size }) => (
            profileIcon(color)
          ),
          }}/>
        <Tab.Screen name={stackNavigationsConsts.JOIN_STACK} component={JoinStackScreens} 
        options={{ 
          tabBarLabel: navigationConsts.JOIN ,
          tabBarIcon: ({ color, size }) => (
            JoinIcon(color)
          ),
          }}/>
        <Tab.Screen name={stackNavigationsConsts.NOTIFICATIONS_STACK} component={AnotherStackScreen} options={{ 
          tabBarLabel: navigationConsts.NOTIFICATIONS ,
          tabBarIcon: ({ color, size }) => (
            messagesIcon(color)
          ),
          tabBarBadge: 12
          }}/>
        <Tab.Screen name={stackNavigationsConsts.ADD_RIDE_STACK} component={AnotherStack1Screen} options={{ 
          tabBarLabel: navigationConsts.ADD_RIDE ,
          tabBarIcon: ({ color, size }) => (
            addRideIcon(color)
          ),
          }}/>
        
      </Tab.Navigator>
  );
}

//导入和其他东西
const Tab=createBottomTabNavigator（）；
导出默认函数MainTabNavigator（）{
返回(
(
homeIcon（彩色）
),
}}
/>
(
配置文件图标（颜色）
),
}}/>
(
JoinIcon（彩色）
),
}}/>
(
messagesIcon（彩色）
),
塔巴贝奇：12
}}/>
(
addRideIcon（彩色）
),
}}/>
);
}

我在这里找到了解决方案-从v5开始有一个解决方案，需要从抽屉导航状态提取路线列表，并过滤掉您不想要的标签，正如我所理解的那样，它工作得非常好

请参见以下自定义抽屉的渲染功能：

render() {
    const {state, ...rest} = this.props.drawerProps
    const newState = {...state}
    newState.routes = newState.routes.filter((item) => item.name !== "זמני")
    return (
        <DrawerContentScrollView {...this.props} 
        >
            <View style={styles.avatar}>                         
                <View style={styles.imageContainer}>
                    <Image style={styles.image} source={require('../../../assets/images/man_smile.png')}/>
                    <Text style={{...styles.text, fontSize:22, marginTop:5}}>גלעד דהן</Text>
                </View>
            
            </View>
            <View style={styles.items}>
              <DrawerItemList 
              state={newState}
              {...rest}
              />
              <DrawerItem label={navigationConsts.MAIN} onPress={() => this.props.nav.navigate(stackNavigationsConsts.HOME_STACK)} labelStyle={styles.text}/>
              <DrawerItem label="התנתק" onPress={() => this.props.logout()} labelStyle={styles.text}/>
              
            </View>
      </DrawerContentScrollView>

render（）{
const{state，…rest}=this.props.drawerProps
const newState={…state}
newState.routes=newState.routes.filter（（项目）=>item.name！==“•מני”）
返回(
גלעד דהן
this.props.nav.navigate（stackNavigationConsts.HOME_STACK）}labelStyle={styles.text}/>
this.props.logout（）}labelStyle={styles.text}/>

我在这里找到了解决方案-从v5开始有一个解决方案，需要从抽屉导航状态提取路线列表，并过滤掉您不想要的标签，正如我所理解的那样，它工作得非常好

请参见以下自定义抽屉的渲染功能：

render() {
    const {state, ...rest} = this.props.drawerProps
    const newState = {...state}
    newState.routes = newState.routes.filter((item) => item.name !== "זמני")
    return (
        <DrawerContentScrollView {...this.props} 
        >
            <View style={styles.avatar}>                         
                <View style={styles.imageContainer}>
                    <Image style={styles.image} source={require('../../../assets/images/man_smile.png')}/>
                    <Text style={{...styles.text, fontSize:22, marginTop:5}}>גלעד דהן</Text>
                </View>
            
            </View>
            <View style={styles.items}>
              <DrawerItemList 
              state={newState}
              {...rest}
              />
              <DrawerItem label={navigationConsts.MAIN} onPress={() => this.props.nav.navigate(stackNavigationsConsts.HOME_STACK)} labelStyle={styles.text}/>
              <DrawerItem label="התנתק" onPress={() => this.props.logout()} labelStyle={styles.text}/>
              
            </View>
      </DrawerContentScrollView>

render（）{
const{state，…rest}=this.props.drawerProps
const newState={…state}
newState.routes=newState.routes.filter（（项目）=>item.name！==“•מני”）
返回(
גלעד דהן
this.props.nav.navigate（stackNavigationConsts.HOME_STACK）}labelStyle={styles.text}/>
this.props.logout（）}labelStyle={styles.text}/>