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

【问题标题】：React Native - Trying to create a drawer with tabs navigators in react navigation without the Drawer Item of the Tabs being renderedReact Native - 尝试在反应导航中创建一个带有选项卡导航器的抽屉，而不呈现选项卡的抽屉项目
【发布时间】：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>
  );
}

【问题讨论】：

标签： react-native react-navigation

【解决方案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>

【讨论】：