Скрыть элемент TabBar в TabNavigator

Question

Как можно скрыть определенный элемент TabBar от TabNavigator. Есть ли определенный TabBarOptions вариант, который имеет visible ключ (true/false), как это?

const Tabs = TabNavigator({
  Home: {
    screen: Home
  },
  Profile: {
    screen: Thanks,
    tabBarOptions: {
      visible: false
    },
  },
  More: {
    screen: More
  },
})

Answer 1

Мое решение состояло в том, чтобы вернуть настраиваемую кнопку tabbarbutton, которая: View с высотой и шириной, установленной на 0, отлично работает

      <Tabs.Screen name="Refer A Friend" component={WebViewComponent} 
    options={{
        tabBarButton: () => (
            <View style={{width:0, height:0}}></View>
        ),
        tabBarVisible:false //hide tab bar on this screen

    }}
/>

Answer 2

Нет скрытой опции для скрытия определенного элемента из TabNavigator.

Вам нужно создать Stacknavigator и Tabnavigator. В Stacknavigator вы добавите свои "невидимые" элементы панели вкладок, а в конце Tabnavigator, чьи "видимые" элементы панели вкладок.

Автор: @ragnorc из GitHub

const TabsScreen = TabNavigator({
  Profile: { // visible TabBar item
    screen: Thanks,
    tabBarOptions: {
      visible: false
    },
  },
  More: { // visible TabBar item
    screen: More
  },
})

const MainScreenNavigator = StackNavigator({
    Home: { // invisible TabBar item
        screen: Home,
        navigationOptions : {
            header: null /* hide header*/
        }
    },
    Screen 2: { }, // invisible TabBar item
    Screen 3: { }, // invisible TabBar item
    Screen 4: { }, // invisible TabBar item
    TabsScreen: { 
        screen: TabsScreen,
        navigationOptions : {
            header: null /* hide header*/
        }
    },
});

Answer 3

Проблема с tabBarOptionsзаключается в том, что скрывается только текущая навигация (вкладки) для выбранного экрана. Но не скрывает / не показывает вкладки.

tabBarOptions: {
      visible: false
    }

Индивидуальное решение

Я сделал специальный класс для этого, используя createMaterialTopTabNavigator

export default class CustomTabsNavigator extends Component {
  // Final navigation setup with screens
  TabsNavigation;

  constructor(props) {
    super(props);
    // Only this is necessary if you just want to hide/show without change it.
    this._setScreens();
  }
  // This is necessary if you want to hide/show depending on some user behavior
  componentDidUpdate(prevProps) {
    // Add your condition to avoid infinite renders
    if (prevProps.foo === this.props.foo) return;
    this._setScreens();
  }
  // Actual code to show/hide based on props.
  _setScreens = () => {
    const { isAdmin } = this.props;
    const screens = {};
    const settings = {
      tabBarOptions: {
        style: {...}
      }
    };
    // Set tabs depending on user and state
    if (isAdmin) {
      screens.Dashboard = {
        screen: DashboardScreen,
        navigationOptions: { ... }
      };
    }
    screens.Home = { screen: HomeScreen };
    this.TabsNavigation = createMaterialTopTabNavigator(screens, settings);
    // Since we are not using setState
    this.forceUpdate();
  };

  render() {
    // AppContainer is required in react-native version 3.x
    const { props } = this;
    const NavigatorTabs = createAppContainer(this.TabsNavigation);
    return <NavigatorTabs screenProps={{ ...props }} />;
  }
}

Реализация вкладок:

<CustomTabsNavigator isAdmin={true} />

Answer 4

Нет такой "видимой" опции для отдельной вкладки, хотя о ее реализации говорили.

Можно отобразить только определенные вкладки. Вы можете динамически отображать ваш TabNavigator, передавая ему определенные вкладки, которые вы хотите представить в определенное время. Вместо того, чтобы жестко кодировать аргумент для TabNavigator(), вы делаете аргумент объектом, представляющим вкладки, которые вы хотите визуализировать, а затем вы можете вносить изменения в этот объект с течением времени.

Смотрите здесь для умной реализации этого.