如何在 React Native 的某些屏幕中隐藏 BottomTabNavigator?

时间:2021-05-31 08:13:16

标签: react-native react-navigation react-navigation-bottom-tab

我在 App.js 文件夹中创建了一个 BottomTabNavigator。导航器工作正常,但它显示在我应用程序的每个屏幕上。如何更改它,使其仅显示在 BottomTabNavigator 中列出的屏幕上?

示例:我想隐藏 BottomTabNavigator 中的 ExampleScreen

这是我在 App.js 中的内容:

const Stack = createStackNavigator();

const Tab = createBottomTabNavigator();

const Drawer = createDrawerNavigator();

const DrawerNavigator = () =>{
    return (
        <Drawer.Navigator initialRouteName="MainScreen" drawerType='slide'
                          drawerStyle={{paddingTop: 15}}
        >
            <Drawer.Screen name="MainScreen" component={MainScreen}/>
            <Drawer.Screen name="ScreenOne" component={ScreenOne} />
        </Drawer.Navigator>
    );
}

const BottomTabNavigation = () => {
  return(
      <Tab.Navigator
          screenOptions={ ({route}) => ({
              tabBarIcon: ({focused, color, size}) => {
                  let iconName;

                  if(route.name === 'Home'){
                      iconName = 'home'
                  } else if(route.name === 'Advices') {
                      iconName = 'zap'
                  } else if(route.name === 'Tasks'){
                      iconName = 'check-square'
                  } else if(route.name === 'Time'){
                      iconName = 'clock'
                  } else if(route.name === 'Reminders'){
                      iconName = 'book-open'
                  }

                  return <Feather name={iconName} size={26} color={color} />

              }
          })}
          tabBarOptions={{
              activeTintColor: colors.dark,
              inactiveTintColor: colors.midGrey
          }}
      >
          <Tab.Screen name='Home' component={DrawerNavigator} />
          <Tab.Screen name='Advices' component={GoodJobScreen} />
          <Tab.Screen name='Tasks' component={ChecklistScreen} />
          <Tab.Screen name='Time' component={ScreenTwo}/>
          <Tab.Screen name='Reminders' component={CardExtendedScreen} />
      </Tab.Navigator>
  )
};

  return (
        <SafeAreaProvider>
            <NavigationContainer >
                <Stack.Navigator
                    screenOptions={{
                        headerShown: false}}
                    initialRouteName="MainScreen">
                    <Stack.Screen name="MyTabs1" component={TabNavigator} />
                    <Stack.Screen name="MyTabs2" component={ScreenTwo} />
                    <Stack.Screen name="MyTabs3" component={ScreenThree} />
                    <Stack.Screen name="ExampleScreen" component={ExampleScreen}/>
                    <Stack.Screen name="MainScreen" component={BottomTabNavigation}/>
                    <Stack.Screen name="ChecklistScreen" component={ChecklistScreen} />
                    <Stack.Screen name="CardExtendedScreen" component={CardExtendedScreen} />
                    <Stack.Screen name="CardExtendedScreen2" component={CardExtendedScreen2} />
                    <Stack.Screen name="CardExtendedScreen3" component={CardExtendedScreen3} />
                    <Stack.Screen name="TopBar" component={TopBar} />
                </Stack.Navigator>
            </NavigationContainer>
        </SafeAreaProvider>
    );
};

AppRegistry.registerComponent('Application', () => App);

0 个答案:

没有答案