从嵌套导航器读取路线名称

时间:2020-03-17 20:53:14

标签: reactjs react-native react-navigation

因此,当用户导航到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;

0 个答案:

没有答案