如何在 react-navigation 5x 中隐藏抽屉项目？答案

【问题标题】：How to hide Drawer item in react-navigation 5x?如何在 react-navigation 5x 中隐藏抽屉项目？
【发布时间】：2020-09-23 23:51:54
【问题描述】：

我正在尝试使用 react-navigation 在我的应用程序中创建抽屉导航，但我很难隐藏一项。我想要什么：创建一些屏幕（在应用程序内部导航），但不在抽屉中显示这些屏幕。我正在使用这个文档：(https://reactnavigation.org/docs/nesting-navigators/#navigator-specific-methods-are-available-in-the-navigators-nested-inside)

但是我有两个问题： 1）Root 仍然显示； 2) 我无法直接导航到“隐藏”屏幕，它说该屏幕不存在。

这是我当前的代码：

const Stack = createStackNavigator();
function Root2() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="NewEditPilot" component={NewEditPilot} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}


const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator drawerContent={props => <SideBar2 {...props} />}>
      <Drawer.Screen name="Home" component={Home} />
      <Drawer.Screen name="PilotMgnt" component={PilotMgnt} />
      <Drawer.Screen name="Root2" component={Root2} />
    </Drawer.Navigator>
  );
}


export default function App() {


  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Root>
          <NavigationContainer>
            <MyDrawer />
          </NavigationContainer>
        </Root>
      </PersistGate>
    </Provider>
  );
}

在这种情况下，我试图隐藏 NewEditPilot 和 Settings 屏幕。这就是我导航到这些屏幕的方式：navigation.navigate('NewEditPilot')（这是在 react-navigation 4x 上工作的）。

另外，这就是我在 react-navigation 4x 中使用（和工作！）的方式：

// Telas principais
const Drawer = DrawerNavigator(
  {
    Home: { screen: Home },
    PilotMgnt: { screen: PilotMgnt},
    CurRace: { screen: CurRace},
    Settings: { screen: Settings},        
    LogViewScreen: { screen: LogViewScreen},    
  },
  {
    initialRouteName: "Home",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    contentComponent: props => <SideBar {...props} />
  }
);

// sub-telas
const AppNavigator = StackNavigator(
  {
    Drawer: { screen: Drawer },    
    NewEditPilot: { screen: NewEditPilot },
    PersonalRank: { screen: PersonalRank },  
    RCharts: { screen: RCharts},
    RChartsArchive: { screen: RChartsArchive},
    Archive: { screen: Archive },
    ArchiveView: { screen: ArchiveView },
    ArchivePersonalRank: { screen: ArchivePersonalRank },
  },
  {
    initialRouteName: "Drawer",
    headerMode: "none"
  }
);




export default () =>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Root>
          <AppNavigator />
        </Root>
      </PersistGate>
    </Provider>
  ;

【问题讨论】：

标签： react-native react-navigation react-navigation-drawer

【解决方案1】：

在this issue 的帮助下，我设法妥善解决了这个问题。

要正确隐藏项目，您应该创建一个过滤路线的函数，并将其传递给 Drawer.Navigator 的 drawerContent 属性。

假设您想从抽屉中隐藏登录屏幕，但您仍然希望能够导航到它，无论何时，您都应该执行以下操作：

import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
} from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();
    
const CustomDrawerContent = (props) => {
    const { state, ...rest } = props;
    const newState = { ...state };
    newState.routes = newState.routes.filter(
      (item) => item.name !== 'Login',
    );
    
    return (
      <DrawerContentScrollView {...props}>
        <DrawerItemList state={newState} {...rest} />
      </DrawerContentScrollView>
    );
  };
    
  export default () => (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerContent={(props) => <CustomDrawerContent {...props} />}
      screenOptions={{
        headerShown: true,
      }}>
       <Drawer.Screen
         name="Home"
         component={HomeScreen}
         options={{ title: 'Home' }}
       />
        .
        .
        .

希望这会有所帮助，干杯。

【讨论】：

这是一个很好的解决方案，而且非常灵活。如果我想隐藏某些屏幕的底部标签栏，我也将其用作一种解决方法，我只需将该屏幕添加到抽屉项目列表中，隐藏它们以过滤掉该路线并完美运行！

【解决方案2】：

在您的 Sidebar2 组件中，您可以选择创建一个自定义的 <DrawerContentScrollView />，其中包含 <DrawerItem />。这些<DrawerItem /> 将是您希望在抽屉中可见的那些项目。 navigation 属性默认传递给抽屉内容组件。您可以使用此导航道具使用navigation.navigate('Screen_Name') 导航到特定屏幕。确保有一个<Drawer.Screen> 可用于您要导航的路线。

https://reactnavigation.org/docs/drawer-navigator#providing-a-custom-drawercontent

【讨论】：