React native 基于选项卡的菜单,侧菜单位于一页上
我尝试将基于选项卡的菜单和侧边栏菜单放在一个页面上,用于react本机应用程序。现在只显示其中一个,基于选项卡的菜单或侧边栏菜单。这是我的导航码。我使用了wix react本机导航。目标是使两个菜单都在一个屏幕上工作。请帮忙React native 基于选项卡的菜单,侧菜单位于一页上,react-native,react-native-navigation,velo,wix-react-native-navigation,React Native,React Native Navigation,Velo,Wix React Native Navigation,我尝试将基于选项卡的菜单和侧边栏菜单放在一个页面上,用于react本机应用程序。现在只显示其中一个,基于选项卡的菜单或侧边栏菜单。这是我的导航码。我使用了wix react本机导航。目标是使两个菜单都在一个屏幕上工作。请帮忙 Navigation.setRoot({ root: { bottomTabs: { id: 'BottomTabsId', children: [ { component: {
Navigation.setRoot({
root: {
bottomTabs: {
id: 'BottomTabsId',
children: [
{
component: {
name: 'SignIn',
options: {
bottomTab: {
fontSize: 12,
text: 'Sign In',
icon: require('./signin.png')
}
}
},
},
{
component: {
name: 'SignUp',
options: {
bottomTab: {
text: 'Sign Up',
fontSize: 12,
icon: require('./signup.png')
}
}
},
},
],
},
sideMenu: {
left: {
component: {
name: 'reactNativeInit.SideDrawer',
passProps: {
side: 'left'
}
}
},
center: {
stack: {
id: "stack1",
children: [
{
component: {
name: 'reactNativeInit.main'
}
}
]
}
},
leftButtons: [
{
id: 'sideMenu'
}
]
}
}
});
在RNN中,底部选项卡和侧菜单是可以组合在一起的布局。 因此,不要使用底部选项卡nav作为主布局,而是使用侧菜单
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'reactNativeInit.SideDrawer',
passProps: {
side: 'left'
}
}
},
center: {
stack: {
id: "stack1",
children: [
{
bottomTabs : {
id: "bottomTabs",
children: [
{
component: {
id: 0,
name: "navigation.DashboardScreen",
options: {
bottomTab: {
text: "Dashboard",
icon: require("../assets/icons/icon-check.png"),
iconColor: "#8b8b8b",
selectedIconColor: "rgb(35, 128, 187)"
}
}
}
},
{
component: {
id: 1,
name: "navigation.NotificationsScreen",
options: {
bottomTab: {
text: "Notifications",
icon: require("../assets/icons/icon-check.png"),
iconColor: "#8b8b8b",
selectedIconColor: "rgb(35, 128, 187)"
}
}
}
},
{
component: {
id: 2,
name: "navigation.MessagesScreen",
options: {
bottomTab: {
text: "Messages",
icon: require("../assets/icons/icon-check.png"),
iconColor: "#8b8b8b",
selectedIconColor: "rgb(35, 128, 187)"
}
}
}
},
{
component: {
id: 3,
name: "navigation.UsersScreen",
options: {
bottomTab: {
text: "Contacts",
icon: require("../assets/icons/icon-check.png"),
iconColor: "#8b8b8b",
selectedIconColor: "rgb(35, 128, 187)"
}
}
}
}
]
}
}
]
}
}
}
}
});