如何使用反应本机导航 v2 添加侧边栏抽屉?
How to add sidebar drawer with react native navigation v2?
使用 react-native-navigation v1,您可以像这样设置抽屉:
drawer: {
left: {
screen: 'ScreenName'
}
}
在 react-native-navigation 的文档中他们提到仍然支持抽屉,
但没有它的用法示例。我尝试了与 v1 中相同的方法,但没有用。有没有人以某种方式实现了它?
在 RNN V2 及更高版本中,您可以通过简单地使用 sideMenu 而不是旧的抽屉选项来添加抽屉,例如:
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
sideMenu: {
id: "sideMenu",
left: {
component: {
id: "Drawer",
name: "navigation.Drawer"
}
},
center: {
stack: {
id: "AppRoot",
children: [{
component: {
id: "App",
name: "navigation.AppScreen"
}
}]
}
}
}
}
});
}
Take a look at this 并导航至侧边菜单
为了关闭抽屉,请使用 Navigation.mergeOptions 并像这样传递 visible false
<Button onPress={this.hideSideMenu}/>
hideSideMenu() {
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: false
}
}
});
}
使用 react-native-navigation v1,您可以像这样设置抽屉:
drawer: {
left: {
screen: 'ScreenName'
}
}
在 react-native-navigation 的文档中他们提到仍然支持抽屉,
但没有它的用法示例。我尝试了与 v1 中相同的方法,但没有用。有没有人以某种方式实现了它?
在 RNN V2 及更高版本中,您可以通过简单地使用 sideMenu 而不是旧的抽屉选项来添加抽屉,例如:
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
sideMenu: {
id: "sideMenu",
left: {
component: {
id: "Drawer",
name: "navigation.Drawer"
}
},
center: {
stack: {
id: "AppRoot",
children: [{
component: {
id: "App",
name: "navigation.AppScreen"
}
}]
}
}
}
}
});
}
Take a look at this 并导航至侧边菜单
为了关闭抽屉,请使用 Navigation.mergeOptions 并像这样传递 visible false
<Button onPress={this.hideSideMenu}/>
hideSideMenu() {
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: false
}
}
});
}