react-native - 如何在 react-navigation 5x 中隐藏抽屉项目?
问题描述
我正在尝试使用 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>
;
解决方案
在这个问题的一些帮助下,我只是设法正确解决了这个问题。
要正确隐藏项目,您应该创建一个过滤路由的函数,并将其传递给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' }}
/>
.
.
.
希望这会有所帮助,干杯。
推荐阅读
- python - 如何在python中将一个句子分成两个句子?
- node.js - 我正在使用 JS 中的 axios 从网站请求 html 内容,但该网站阻止了我的请求
- c - 分段错误的不确定性
- c# - 为什么删除事件后 Blazor UI 组件不更新?
- pandas - pandas - numpy 使用 np.where 计算和构造新列
- google-apps-script - 选中复选框时将数据行复制到新工作表
- python - 什么是衡量训练性能的好学习率图
- python - 如何解决在 python 中使用 Lxml 的问题?
- amazon-web-services - 我应该使用 AWS lambda 还是 sagemaker 运行预测预测模型?
- xamarin.forms - 使用 Xamarin.Forms Shell 将选项卡移动到底部