我在 React Native
中使用 react-navigation
并且我想创建一个侧边栏菜单,它作为一个从左到右的叠加层打开,并填充宽度的80-90%左右 .
没有反应导航,这可以使用 react-native-side-bar
这样的包,但我想知道我是否可以使用DrawerNavigator获得完全相同的功能 .
但似乎DrawerNavigator有菜单按钮 . 是不是可以自己配置覆盖?
编辑
解决方案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
和 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 }
});
但是由于DrawerNavigator嵌套在 A
中, AScreen
的 Headers 将位于顶部 .
1 回答
我需要您正在描述的相同功能,并设法使其与React导航一起使用 . 基本上,我需要一个完全自定义的抽屉(侧面菜单) .
这是我的导航器设置:
如您所见,我创建了一个抽屉组件,其中包含我的自定义抽屉内容 . 这是该组件的基本设置:
我希望这有帮助 . 我已经简化了一些代码来主要显示相关位,所以如果你有任何后续问题,请问!