因此,当用户导航到Stack 2,Tab 3时,我试图隐藏底部的导航栏。
如果用户导航到不属于TopTab的屏幕,我现在可以将其隐藏。
在我当前的代码示例中,该屏幕称为OtherScreen
。
但是,当我导航至选项卡3并尝试查看currentRoute
时,我得到:
currentRoute: {
key: 'Stack2',
routes: [
{
routeName: 'Stack2',
key: 'id number of some kind',
index: 2,
routes: [
{key: 'Tab1', routeName: 'Tab1'},
{key: 'Tab2', routeName: 'Tab2'},
{key: 'Tab3', routeName: 'Tab3'},
]
}
]
}
关于如何确定是否可以从根导航中检查当前路线是否为Tab 3
并设置tabBarVisible: false
的任何想法?
这是一个代码段
import {
createBottomTabNavigator,
createMaterialTopTabNavigator,
} from 'react-navigation-tabs';
// STACK 2 Tabs
const Stack2TabNavigatorConfig = {
initialRouteName: 'Tab1',
};
const Stack2TabRouteConfig = {
TAB1: {
screen: Tab1Screen,
navigationOptions: {
tabBarLabel: 'Tab1',
},
},
TAB2: {
screen: Tab1Screen,
navigationOptions: {
tabBarLabel: 'Tab2',
},
},
TAB3: {
screen: Tab1Screen,
navigationOptions: {
tabBarLabel: 'Tab3',
},
},
};
const TopTabs = createMaterialTopTabNavigator(
Stack2TabNavigatorConfig,
Stack2TabRouteConfig,
);
// STACK 2
const Stack2NavigatorConfig = {
initialRouteName: 'Stack2',
headerLayoutPreset: 'center',
};
const Stack2RouteConfigs = {
Stack2: {
screen: TopTabs,
},
OtherScreen: {
screen: 'OtherScreen',
},
};
const Stack2 = createStackNavigator(Stack2NavigatorConfig, Stack2RouteConfigs);
// APP STACK
const TabNavigatorConfig = {
initialRouteName: 'Stack1',
};
const RouteConfigs = {
Stack1: {
screen: Stack1,
navigationOptions: {
tabBarLabel: 'Stack 1',
},
},
Stack2: {
screen: Stack2,
navigationOptions: ({ navigation }) => {
const currentRoute = navigation.state.routes[navigation.state.index];
let routeName;
let tabBarVisible = true;
if (
currentRoute &&
currentRoute.routes &&
currentRoute.routes[1] &&
currentRoute.routes[1].routeName
) {
routeName = currentRoute.routes[1].routeName;
}
if (routeName === 'OtherScreen') {
tabBarVisible = false;
}
return {
tabBarLabel: 'Stack 2',
tabBarVisible,
};
},
},
};
const AppNavigator = createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);
export default AppNavigator;