React Native开发：如何实现TabNavigator的tabBarComponent按需显隐

我来帮你搞定这个TabNavigator底部栏显隐的问题，其实核心就是利用屏幕级的navigationOptions来覆盖全局配置，具体操作如下：

1. 调整全局TabNavigator配置 #

首先把你当前全局固定的tabBarVisible: true保留作为默认值，不用硬写死，让子屏幕自己决定是否覆盖：

const Tabs = TabNavigator('MainTabs', {
  NestedNavigatorStack: { screen: Home },
  Search: { screen: Search },
  Cart: { screen: Cart },
  WishList: { screen: WishList },
  Profile: { screen: Profile },
}, {
  initialRouteName: 'NestedNavigatorStack',
  lazy: false,
  animationEnabled: true,
  tabBarPosition: 'bottom',
  tabBarComponent: TabBarHeader,
  // 全局默认显示底部栏，子屏幕可单独覆盖
  navigationOptions: { tabBarVisible: true }
});

2. 在目标屏幕单独控制显隐 #

静态固定显隐 #

如果某个屏幕（比如Search页面，或者Home嵌套栈里的详情页）需要固定隐藏底部栏，直接在该组件的navigationOptions里设置tabBarVisible: false即可：

比如在ProductDetail详情页中：

class ProductDetail extends React.Component {
  // 静态配置：进入该页面就隐藏底部栏
  static navigationOptions = {
    tabBarVisible: false
  };

  render() {
    return (
      // 你的页面内容
    );
  }
}

如果是某个Tab页面本身要隐藏，比如Profile页面：

class Profile extends React.Component {
  static navigationOptions = {
    tabBarVisible: false
  };

  render() {
    return (
      // 你的页面内容
    );
  }
}

动态控制显隐 #

如果需要根据页面状态（比如滚动位置、操作状态）动态切换底部栏的显隐，可以用navigation.setParams配合函数式的navigationOptions：

首先在组件里定义可动态修改的navigationOptions：

class Home extends React.Component {
  static navigationOptions = ({ navigation }) => {
    // 从params中读取配置，默认显示
    const { params = {} } = navigation.state;
    return {
      tabBarVisible: params.tabBarVisible !== false
    };
  };

  // 比如滚动到一定位置时隐藏底部栏
  handleScroll = () => {
    this.props.navigation.setParams({ tabBarVisible: false });
  };

  // 回到顶部时显示
  handleBackToTop = () => {
    this.props.navigation.setParams({ tabBarVisible: true });
  };

  render() {
    return (
      <ScrollView onScroll={this.handleScroll}>
        {/* 页面内容 */}
        <Button title="回到顶部" onPress={this.handleBackToTop} />
      </ScrollView>
    );
  }
}

原理说明 #

TabNavigator的配置优先级是：屏幕自身的navigationOptions > 全局TabNavigator的navigationOptions，所以只要在需要特殊处理的屏幕里单独设置tabBarVisible，就能覆盖全局的默认值，实现部分屏幕显隐底部栏的效果。

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