我已经在react-native-navigation中设置了带有Bottom选项卡的导航,效果很好
bottomTabs: {
id: 'BOTTOM_TABS_LAYOUT',
children: [
{
stack: {
id: 'HOME_TAB',
children: [
{
component: {
id: 'HOME_SCREEN'
name: 'HomeScreen'
}
}
],
options: {
bottomTab: {
icon: require('./home.png')
}
}
}
},
{
stack: {
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
],
options: {
bottomTab: {
icon: require('./profile.png')
}
}
}
}
]
}
但是当我从选项卡切换到另一个时,我想添加一些其他代码,这怎么办?
您可以通过注册导航事件侦听器来侦听选项卡选择事件。当选定的选项卡更改时,会发出tabSelected
事件。
Navigation.events().registerBottomTabSelectedListener((selectedTabIndex, unselectedTabIndex) => {
});
[如果您想亲自处理选项卡选择,请在要处理选择的selectTabOnPress: false
上设置bottomTab
选项,然后注册tabPressed
侦听器以处理选项卡按下事件。当用户按下选项卡时,将发出此事件。
options: {
bottomTab: {
icon: require('./home.png'),
selectTabOnPress: false
}
}
Navigation.events().registerBottomPressedListener((tabIndex) => {
});