Question

我有一个使用React Navigation 2.2.5的React Native应用程序和一个用createBottomTabNavigator创建的BottomTabNavigator，它有一个子StackNavigator。我需要将底部导航器全局隐藏或横向隐藏在子StackNavigator的至少一个屏幕中。这甚至可以实现吗？通过createBottomTabNavigator tabBarOptions？

的style属性

  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并在方向更改时渲染null。为了接收更改方向的事件，您可以使用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/>
  }
}

也许这段代码不准确，但解决方案是正确的，因为我将它用于键盘显示/隐藏。我希望这会对你有所帮助。

如何在方向更改时隐藏React Native BottomTabNavigator（来自React Navigation）？

1 个答案: