如何在react-navigation 5x中隐藏Drawer项目？

Question

我试图在我的应用程序中使用react-navigation创建一个Drawer导航，但我很难隐藏一个项目。我想：创建一些屏幕（在应用程序中导航），但不在Drawer中显示这些屏幕。我正在使用这个文档：(https:/reactnavigation.orgdocsnesting-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>
  );
}

在这种情况下，我试图隐藏de。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>
  ;

Answer 1

在你的Sidebar2组件中，你可以选择创建一个自定义的 <DrawerContentScrollView /> 其中将有 <DrawerItem />. 这些 <DrawerItem /> 将是那些你想在抽屉中显示的项目。navigation 默认情况下，drawerContent组件会传递这个道具。你可以使用这个导航道具来导航到一个特定的屏幕上，使用 navigation.navigate('Screen_Name'). 确保有一个 <Drawer.Screen> 可用于你想导航的路径。

https:/reactnavigation.orgdocsdrawer-navigator#providing-a-custom-drawercontent。