javascript - How to hide Tab conditionally in react-navigation? - Stack Overflow

admin2025-04-03 0

I want to hide one of my tabs conditionally if user login,

So I have 5 Tabs If user login\register I get a boolean from a redux store, if this user login i want to how a "Library tab" if not login, i don't want to show this tab "Library" with others and just keep 4 tabs in the App

Code

import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';

let {isLogin} = store.getState().user;


const TabHome = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'Home',
      },
    },
    Browse: {
      screen: Browse,
      navigationOptions: {
        tabBarLabel: 'Browse',
      },
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: 'Search',
        headerShown: false,
      },
    },
    Radio: {
      screen: Radio,
      navigationOptions: {
        tabBarLabel: 'Radio',
      },
    },
    Library: isLogin ? (
      {
        screen: YourLibrary,
        navigationOptions: {
          tabBarLabel: 'Library',
        },
      }
    ) : (
      <View /> // Or :null => Not work and got the under error msg
    ),
    // Library: {
    //   screen: YourLibrary,
    // },
  },
)

export default createAppContainer(TabHome);

Error: The ponent for route 'Library' must be a React ponent. For example:

import MyScreen from './MyScreen'; ... Library: MyScreen, }

You can also use a navigator:

import MyNavigator from './MyNavigator'; ... Library: MyNavigator, }

I want to hide one of my tabs conditionally if user login,

Code

import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';

let {isLogin} = store.getState().user;


const TabHome = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'Home',
      },
    },
    Browse: {
      screen: Browse,
      navigationOptions: {
        tabBarLabel: 'Browse',
      },
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: 'Search',
        headerShown: false,
      },
    },
    Radio: {
      screen: Radio,
      navigationOptions: {
        tabBarLabel: 'Radio',
      },
    },
    Library: isLogin ? (
      {
        screen: YourLibrary,
        navigationOptions: {
          tabBarLabel: 'Library',
        },
      }
    ) : (
      <View /> // Or :null => Not work and got the under error msg
    ),
    // Library: {
    //   screen: YourLibrary,
    // },
  },
)

export default createAppContainer(TabHome);

Error: The ponent for route 'Library' must be a React ponent. For example:

import MyScreen from './MyScreen'; ... Library: MyScreen, }

You can also use a navigator:

import MyNavigator from './MyNavigator'; ... Library: MyNavigator, }

Share edited Feb 18, 2020 at 18:05 asked Feb 18, 2020 at 17:59 Oliver D 2,8999 gold badges48 silver badges91 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 10

In React Navigation v5:

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

function HomeScreen(props) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function AboutScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>About!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  const [showTab, setShowTab] = React.useState(true);

  // Show the about tab after 5 seconds.
  // Change this to use Redux or however
  // you would like to change which tabs are displayed
  setTimeout(() => {
    setShowTab(false);
    console.log('Hide tab');
  }, 5000);

  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        ponent={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      {showTab ? (
        <Tab.Screen
          name="About"
          ponent={AboutScreen}
          options={{
            tabBarLabel: 'About',
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="book" color={color} size={size} />
            ),
          }}
        />
      ) : null}
      <Tab.Screen
        name="Settings"
        ponent={SettingsScreen}
        options={{
          tabBarLabel: 'Settings',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="settings" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

Example in Expo https://snack.expo.io/@jackvial/createbottomtabnavigator-%7C-react-navigation-v5

You'd know that you can override the Tabbar Component and add your own logic for it? Maybe this gives you an Idea about that: https://stackoverflow./a/58520533/1256697

Maybe this way, you can set conditional styles to show or hide single items of your TabBar.

remove Library tab definition from TabHome and add it just before exporting the ponent:

if(isLogin) {
  TabHome.Library = {
    screen: YourLibrary,
    navigationOptions: {
      tabBarLabel: 'Library',
    }
  }
}

export default createAppContainer(TabHome)

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1743688894a215502.html

javascriptHow to hide Tab conditionally in reactnavigationStack Overflow

最新回复(0)