我在用react-navigation
in React Native
我想创建一个侧边栏菜单,它作为从左到右的覆盖层打开,并填充大约 80-90% 的宽度。
如果没有反应导航,这可以通过诸如react-native-side-bar
,但我想知道是否可以使用 DrawerNavigator 获得完全相同的功能。
但似乎 DrawerNavigator 有菜单按钮。不是可以自己配置覆盖吗?
Edit
解决方案1
一种方法是使用
const MyStackNavigator = StackNavigator({
A: { screen: AScreen },
B: { screen: BScreen },
C: { screen: CScreen }
});
const RootNavigator = DrawerNavigator({
A: { screen: MyStackNavigator },
}, {
// set content of side bar
contentComponent: (props) => <Sidebar />
});
但随后就可以从所有屏幕拖入抽屉AScreen
, BScreen
, and CScreen
,虽然我只想让它存在AScreen
,因为 StackNavigator 嵌套在 DrawerNavigator 中。
解决方案2
另一种解决方案是使用
const MyDrawerNavigator = DrawerNavigator({
A: { screen: AScreen },
}, {
// set content of side bar
contentComponent: (props) => <Sidebar />
});
const RootNavigator = StackNavigator({
A: { screen: MyDrawerNavigator },
B: { screen: BScreen },
C: { screen: CScreen }
});
但随后的标题AScreen
将位于顶部,因为 DrawerNavigator 嵌套在A
.