Как скрыть React Native BottomTabNavigator (из React Navigation) при изменении ориентации?

Question

У меня есть приложение React Native с использованием React Navigation 2.2.5 и BottomTabNavigator, созданный с помощью createBottomTabNavigator, у которого есть дочерний StackNavigator.Мне нужно, чтобы Нижний навигатор был скрыт в горизонтальной ориентации глобально или хотя бы на одном из экранов дочернего StackNavigator.Можно ли этого достичь?С помощью свойства style вкладки createBottomTabNavigator tabBarOptions?

  const RoomStack = createStackNavigator(
{
 Home: {screen: RoomsScreen},
 Room: {screen: RoomsRender},
}, 
{headerMode: 'none',
  initialRouteName: 'Home',
});

const HomeStack = createBottomTabNavigator(
{
  Home: RoomStack,
  'Create a Space': SpaceScreen,
  Settings: SettingsStack,
},
{
  /* Other configuration remains unchanged */
});

export default HomeStack

Answer 1

Вы можете использовать пользовательский tabBarComponent и отображать ноль при изменении ориентации.Для получения события изменения ориентации вы можете использовать пакет React Native Orientation (я сам не использовал его, но не думаю, что есть проблемы с его использованием).Ваш код изменится следующим образом:

import myTabBarComponent ...
const HomeStack = createBottomTabNavigator(
{
  Home: RoomStack,
  'Create a Space': SpaceScreen,
  Settings: SettingsStack,
},
{
  tabBarComponent: myTabBarComponent,
});

И ваш пользовательский myTabBarComponent будет:

import React from 'react'
import { BottomTabBar } from 'react-navigation-tabs';
import Orientation from 'react-native-orientation';

export default class myTabBarComponent extends React.PureComponent {

  constructor(props: TProps, context: any) {
    super(props)
    this.state = {
      lanscape: true,
    }
    Orientation.addOrientationListener(this._orientationDidChange);
  }

  componentWillUnmount() {
    Orientation.removeOrientationListener(this._orientationDidChange);
  }


  _orientationDidChange = (orientation) => {
    if (orientation === 'LANDSCAPE') {
      this.setState({lanscape : true})
    } else {
      this.setState({lanscape : false})
    }
  }

  render() {
    return !this.state.lanscape ?
      <BottomTabBar {...this.props} />
      :
      <View/>
  }
}

Возможно, этот код не точный, но решение верное, потому что я использую его для клавиатурыпоказать спрятать.Я надеюсь, что это поможет вам.