React Native - 尝试在反应导航中创建一个带有选项卡导航器的抽屉，而不呈现选项卡的抽屉项目

Posted 2023-02-19

【中文标题】React Native - 尝试在反应导航中创建一个带有选项卡导航器的抽屉，而不呈现选项卡的抽屉项目

【英文标题】：React Native - Trying to create a drawer with tabs navigators in react navigation without the Drawer Item of the Tabs being rendered

【发布时间】：2021-03-26 07:41:15

【问题描述】：

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

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

我决定留下它但删除标签，但它并没有完全删除它。它删除了文本，但仍然有一个组件在那里呈现（见下面的 Image1）

图片1： DrawerItem still being rendered

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

MainTabNavigator.js

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

【参考方案1】：

我在这里找到了解决方案 - How to hide Drawer Item from Drawer #2021 从 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>