Как скрыть вкладку условно в реакции-навигации?

Question

Я хочу, чтобы условно скрыть одну из моих вкладок при входе пользователя в систему,

Итак, у меня есть 5 вкладок. При входе пользователя в систему \ регистрации я получаю логическое значение из избыточного хранилища, если при входе этого пользователя я хочу как «Библиотека вкладка», если не войти, я не хочу показывать эту вкладку «Библиотека» с другими и просто сохранить 4 вкладки в приложении

Код

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);

Ошибка : Компонент для маршрута «Библиотека» должен быть компонентом React. Например:

импорт MyScreen из './MyScreen'; ... Библиотека: MyScreen,}

Вы также можете использовать навигатор:

импортировать MyNavigator из './MyNavigator'; ... Библиотека: MyNavigator,}

Answer 1

удалить Library определение вкладки из TabHome и добавить его непосредственно перед экспортом компонента:

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

export default createAppContainer(TabHome)

Answer 2

Вы бы знали, что можете переопределить компонент Tabbar и добавить для него свой собственный логин c? Может быть, это дает вам представление об этом: { ссылка }

Может быть, таким образом, вы можете установить условные стили для отображения или скрытия отдельных элементов вашего TabBar.