React Navigation v2：如何在指定页面隐藏Material Tab导航栏？

我之前升级React Navigation v2的时候也踩过这个坑！原来的tabBarVisible: false对MaterialTabNavigator确实不起作用，不过有两个实用的解决办法：

方案一：自定义TabBar组件，通过路由参数控制显示 #

MaterialTabNavigator本身不支持tabBarVisible属性，但我们可以自己封装TabBar组件，根据当前页面的路由参数来决定是否显示底部栏：

1. 首先自定义一个TabBar组件，继承官方的MaterialTabBar：

import { MaterialTabBar } from 'react-navigation-material-bottom-tabs';

const CustomMaterialTabBar = (props) => {
  // 获取当前活跃的路由项
  const activeRoute = props.navigation.state.routes[props.navigation.state.index];
  // 检查路由参数里的tabBarVisible，默认显示
  const shouldShowTabBar = activeRoute.params?.tabBarVisible !== false;
  
  return shouldShowTabBar ? <MaterialTabBar {...props} /> : null;
};

2. 创建MaterialTabNavigator时指定这个自定义组件：

const MyTabNavigator = createMaterialBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
    // 你的其他页面路由
  },
  {
    tabBarComponent: CustomMaterialTabBar,
    // 其他MaterialTabNavigator配置项，比如initialRouteName、barStyle等
  }
);

3. 在需要隐藏底部栏的页面，通过生命周期方法设置参数：

class HiddenScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: '无底部栏页面',
  });

  componentDidMount() {
    // 设置路由参数，通知TabBar隐藏
    this.props.navigation.setParams({ tabBarVisible: false });
  }

  componentWillUnmount() {
    // 离开页面时恢复，避免其他页面受影响
    this.props.navigation.setParams({ tabBarVisible: true });
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>这里看不到底部导航栏啦！</Text>
      </View>
    );
  }
}

方案二：用StackNavigator嵌套Tab导航 #

如果你的页面完全不需要属于Tab导航的一部分，直接把它放在外层的StackNavigator里：

// 先创建你的MaterialTabNavigator
const TabNavigator = createMaterialBottomTabNavigator(/* 你的配置 */);

// 用StackNavigator包裹Tab导航和需要隐藏栏的页面
const RootNavigator = createStackNavigator({
  MainTabs: {
    screen: TabNavigator,
    navigationOptions: { header: null }, // 可以隐藏Stack的头部
  },
  HiddenScreen: {
    screen: HiddenScreen,
    navigationOptions: { title: '无底部栏页面' },
  },
});

这样当你从Tab页面跳转到HiddenScreen时，整个Tab导航会被Stack的页面覆盖，底部栏自然就消失了，返回时又会重新显示。

两种方案各有适用场景：方案一适合页面仍属于Tab路由栈但临时隐藏栏的情况，方案二更适合完全独立于Tab导航的页面。

内容的提问来源于stack exchange，提问作者Joe Lloyd