我是React Native领域的新手,我想在应用程序中从左侧显示侧面菜单,并且我正在使用react-native-navigation这样做,但是我正面临与此相关的问题
首先,我将导航根设置如下:-
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
stack: {
children: [
{
component: {
name: "FindPlace",
options: {
bottomTab: {
text: "find place",
icon: response[0],
},
topBar: {
title: {
text: "find place"
},
leftButtons: [
{
icon: response[2],
id: 'leftSideDrawer',
},
],
}
}
}
}
]
}
},
],
},
sideMenu: {
left: {
component: {
name: 'SideDrawer',
id: 'leftSideDrawer'
}
},
},
}
})
在其中我同时声明了bottomTabs和sideMenu,并在findPlace组件上添加了一个触发事件的按钮,在其中我添加了一个Navigation.event()列表器,用于切换我的leftsideMenu的可见性,如下所示:-
constructor(props) {
super(props);
Navigation.events().bindComponent(this)
}
navigationButtonPressed({ buttonId }) {
Navigation.mergeOptions('leftSideDrawer', {
sideMenu: {
left: {
visible: true
}
}
});
}
但是这根本不起作用,它只是显示一个空白屏幕,如果从setRoot中删除sideMenu部分,它将向我显示bottomTab,当我再次添加sideMenu时,它将显示一个空白屏幕。
在RNN版本2文档上没有关于此的任何示例,我搜索了很多内容,但没有发现任何有助于我解决的问题,因此请让我知道我做错了什么,这样我就可以摆脱这个问题
预先感谢!
答案 0 :(得分:0)
通过将bottomTabs
放在层次结构的根源sideMenu
内,它可以工作。此外,sideMenu
有一个center
字段,该字段必填。 docs说:
center
是必需的,并且包含主应用程序,该应用程序需要具有topBar,也称为stack
。
代码必须按照以下方式实现:
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
id: "leftSideDrawer",
name: "SideDrawer"
}
},
center: {
bottomTabs: {
children: [
{
component: {
name: "FindPlace",
options: {
bottomTab: {
text: "find place",
icon: response[0]
},
topBar: {
title: {
text: "find place"
},
leftButtons: [
{
icon: response[2],
id: "leftSideDrawer",
},
],
}
}
}
}
],
}
}
}
}
});