react-navigation动态显示/隐藏底部导航栏

今天在项目中遇到一个问题，使用createBottomTabNavigator和createStackNavigator构建页面导航。如图1所示，底部导航栏每一个Tab都是一个stackNavigator，当我点击图中GIS地图时，切换到其他Tab选项后再切换回来发现页面依然停留在上次点击GIS地图页面且地图变黑了（图 2）。为了解决这个问题，需要确保切换Tab选项时页面停留在相应stackNavigator的初始页面，也就是图1中的页面。据此，点击图1中GIS地图时需要将底部导航栏隐藏，这样当我们想切换Tab选项时只能先返回到初始页面，也就是图1中的页面。

图1

图2

观察createBottomTabNavigator的源码可以发现this._renderTabBar()就是用来渲染底部导航栏的，点进去发现返回的是一个BottomTabBar组件。

render() {
    const { navigation, renderScene, lazy } = this.props;
    const { routes } = navigation.state;
    const { loaded } = this.state;
    return 
      
        {routes.map((route, index) => {
          if (lazy && !loaded.includes(index)) {
            // Don't render a screen if we've never navigated to it
            return null;
          }

          const isFocused = navigation.state.index === index;

          return 
            {renderScene({ route })}
          ;
        })}
      
      {this._renderTabBar()}
    ;
  }

_renderTabBar = () => {
    const {
      tabBarComponent: TabBarComponent = BottomTabBar,
      tabBarOptions,
      navigation,
      screenProps,
      getLabelText,
      getAccessibilityLabel,
      getButtonComponent,
      getTestID,
      renderIcon,
      onTabPress
    } = this.props;

    const { descriptors } = this.props;
    const { state } = this.props.navigation;
    const route = state.routes[state.index];
    const descriptor = descriptors[route.key];
    const options = descriptor.options;

    if (options.tabBarVisible === false) {
      return null;
    }

    return ;
  };

继续观察BottomTabBar的源码发现其根据当前的路由路径routes渲染一个包含有标签与图表的ButtonComponent组件。开启调试模式观察routes结构发现，routes是一个json对象，其routes字段为一个数组，表示当前stackNavigator中的页面个数，当页面位于如图1所示的初始页面时该数组长度为1，位于如图2所示的页面时该数组长度大于1。

const { routes } = navigation.state;

    const tabBarStyle = [styles.tabBar, this._shouldUseHorizontalLabels() && !Platform.isPad ? styles.tabBarCompact : styles.tabBarRegular, style];
    
    return 
      {routes.map((route, index) => {
        const focused = index === navigation.state.index;
        const scene = { route, focused };
        const accessibilityLabel = this.props.getAccessibilityLabel({
          route
        });
        const testID = this.props.getTestID({ route });

        const backgroundColor = focused ? activeBackgroundColor : inactiveBackgroundColor;

        const ButtonComponent = this.props.getButtonComponent({ route }) || TouchableWithoutFeedbackWrapper;

        return  onTabPress({ route })} testID={testID} accessibilityLabel={accessibilityLabel} style={[styles.tab, { backgroundColor }, this._shouldUseHorizontalLabels() ? styles.tabLandscape : styles.tabPortrait, tabStyle]}>
          {this._renderIcon(scene)}
          {this._renderLabel(scene)}
        ;
      })}
    ;

初始页面的routes

GIS地图的routes

因此，可以在BottomTabBar组件中进行条件渲染，当页面处于如图2所示的页面时返回一个空的View组件，代码如下：

//点击子页面时隐藏底部导航栏
    let number = 0;
    for (var i = 0; i < routes.length; i++) {
      if (routes[i].routes.length > 1) {
        number = number + 1;
      }
    }
    if (number != 0) {
      return 
    }

至此，可以实现点击GIS地图时隐藏底部导航栏的功能（图3）。

图3