![](/img/trans.png)
[英]react-native-navigation: startTabBasedApp and switch to tab
[英]How to switch tabs react-native-navigation
试图弄清楚这一点,我想我只是缺少一些简单的东西。 我已经配置了几个屏幕,我想在第二个屏幕上等待用户操作的选项卡之间切换。
导航:
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
stack: {
id: 'rootStack',
children: [
{
component: {
name: 'dashboard',
id: 'cc.dashboard',
options: {
statusBar: {
visible: true,
style: 'light',
},
},
},
},
],
options: {
bottomTab: {
title: 'Home',
icon: images.bottomIconHome,
testID: 'FIRST_TAB_BAR',
text: 'Home',
selectedIconColor: color.WHITE,
selectedTextColor: color.WHITE,
iconColor: color.WHITE_25,
textColor: color.WHITE_25,
fontFamily: font.LATO_BOLD,
fontSize: 11,
},
bottomTabs: {
selectedTabColor: 'white',
backgroundColor: color.charcoalGreyThree,
titleDisplayMode: 'alwaysShow',
// fontSize: 10
},
topBar: {
visible: false,
},
statusBar: {
visible: true,
style: 'light',
},
layout: {
orientation: ['portrait'],
},
},
},
},
{
stack: {
id:'screen2stack',
children: [
{
component: {
name: 'program',
id: 'cc.program',
options: {
statusBar: {
visible: true,
style: 'light',
},
},
},
},
],
options: {
bottomTab: {
title: 'Program Tab',
icon: images.bottomIconProgram,
testID: 'SECOND_TAB_BAR_BUTTON',
text: 'Program',
selectedIconColor: color.WHITE,
selectedTextColor: color.WHITE,
iconColor: color.WHITE_25,
textColor: color.WHITE_25,
fontFamily: font.LATO_BOLD,
fontSize: 11,
},
bottomTabs: {
selectedTabColor: 'white',
backgroundColor: color.charcoalGreyThree,
titleDisplayMode: 'alwaysShow',
//fontSize: 10
},
topBar: {
visible: false,
},
statusBar: {
visible: true,
style: 'light',
},
layout: {
orientation: ['portrait'],
},
},
},
},
}
});
我试过了:
Navigation.popTo('cc.dashboard');
但这无济于事,所以我尝试了:
Navigation.push('cc.dashboard', {
component: {
id: 'cc.dashboard',
name: 'dashboard',
passProps: propsToPass ? propsToPass : {},
options: {
layout: {
backgroundColor: color.charcoalGreyThree,
componentBackgroundColor: color.charcoalGreyThree,
},
bottomTabs: {
visible: true,
backgroundColor: color.charcoalGreyThree,
},
},
},
});
这有效,但它不会更新屏幕上的底部选项卡,仍将第二个选项卡显示为突出显示。 它也只是将仪表板放在上面,因此您仍然可以单击“主页”和 go 到仪表板。 当您 go 返回第二个屏幕时,它仍然显示仪表板。 任何想法将不胜感激。
使用“react-native-navigation”:“^7.16.0”,“react”:“17.0.1”,“react-native”:“0.64.1”,如果这很重要的话。
为了更改 React Native Navigation 中的当前选项卡索引,您需要为bottomTabs
选项执行合并选项:
Navigation.mergeOptions(this.props.componentId, {
bottomTabs: {
currentTabIndex: 1
}
});
有关更多信息,您建议在文档中查看此部分 - https://wix.github.io/react-native-navigation/docs/bottomTabs/#selecting-a-tab-by-index 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.