react-native - 带有标签栏的底部标签
问题描述
我正在使用反应本机导航的 v2 进行导航,并且我正在尝试使用底部选项卡和侧菜单进行布局。这是我目前的布局
export const goHome = () => Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'app.SideMenu',
},
},
center: {
bottomTabs: {
id: 'BottomTabsId',
options: {
topbar: {
visible: true,
}
},
children: [
{
component: {
name: SERVICES_SCREEN.id,
options: {
topBar: {
title: {
text: "Tab One"
},
},
bottomTab: {
badge: '2',
fontSize: 12,
text: 'Create Job',
icon: require('./res/beep-green.png')
}
}
},
},
{
component: {
name: CREDITS_SCREEN.id,
options: {
topBar: {
title: {
text: "Tab One"
},
},
bottomTab: {
badge: 'New',
text: 'Credits',
fontSize: 12,
icon: require('./res/beep-green.png')
}
}
},
},
{
component: {
name: PROFILE_SCREEN.id,
options: {
topBar: {
title: {
text: "Tab One"
},
},
bottomTab: {
badge: '',
text: 'Profile',
fontSize: 12,
icon: require('./res/beep-green.png')
}
}
},
},
],
},
}
}
}
});
问题是我希望标签也有标签栏,我该如何实现?
解决方案
用这个布局解决了
export const goHome = () => Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'app.SideMenu',
},
},
center: {
bottomTabs: {
id: 'BottomTabsId',
options: {
topbar: {
visible: true,
}
},
children: [
{
stack: {
id: 'Tabs',
children: [
{
component: {
name: SERVICES_SCREEN.id,
options: {
topbar: {
visible: true
},
bottomTab: {
badge: '2',
fontSize: 12,
text: 'Create Job',
}
}
},
},
]
}
},
{
stack: {
id: 'Tabs2',
children: [
{
component: {
name: CREDITS_SCREEN.id,
options: {
bottomTab: {
badge: 'New',
text: 'Credits',
fontSize: 12,
}
}
},
},
]
}
},
{
stack: {
id: 'Tabs3',
children: [
{
component: {
name: PROFILE_SCREEN.id,
options: {
bottomTab: {
badge: '',
text: 'Profile',
fontSize: 12,
}
}
},
},
]
}
},
],
},
}
}
}
});
推荐阅读
- python - 从地理坐标和/或邮政编码获取 NUTS2 区域
- vb.net - 如何将文件中的值分配给变量
- django - Django:事务中的多个批量创建
- c# - 检查功能测试的结果
- mysql - Want help to create view using some function or procedure
- swagger-ui - 在 API 平台中启用 ReDoc 时出错
- android - Admob always return error ERROR_CODE_NO_FILL error code 3
- javascript - Quickblox connection is not successfully established every time in Edge Browser
- python - 如何从 sqlite3 数据库中打印数据?
- r - Optimizing strucchange with Rcpp