如何在反应导航 5x 中隐藏抽屉项目?

Question

我正在尝试使用反应导航在我的应用程序中创建一个抽屉导航，但我很难隐藏一个项目。 我想要的：创建一些屏幕(在应用程序内导航)，但不在抽屉中显示这些屏幕。 我正在使用这个文档：(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')(这是在反应导航 4x 上工作)。

此外，这就是我在反应导航 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

在这个问题上的一些帮助下，我设法正确地解决了这个问题。

要正确隐藏项目，您应该创建一个过滤路线的函数，并将其传递给Drawer.Navigator的抽屉内容道具。

假设您想从抽屉中隐藏登录屏幕，但您仍然希望能够导航到它，只要您愿意，您应该执行以下操作：

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' }}
/>
.
.
.

希望这有帮助，干杯。

Answer 2

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

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