今天在项目中遇到一个问题，使用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 <View style={styles.container}>
      <View style={styles.pages}>
        {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 <ResourceSavingScene key={route.key} style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]} isVisible={isFocused}>
            {renderScene({ route })}
          </ResourceSavingScene>;
        })}
      </View>
      {this._renderTabBar()}
    </View>;
  }

_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 <TabBarComponent {...tabBarOptions} jumpTo={this._jumpTo} navigation={navigation} screenProps={screenProps} onTabPress={onTabPress} getLabelText={getLabelText} getButtonComponent={getButtonComponent} getAccessibilityLabel={getAccessibilityLabel} getTestID={getTestID} renderIcon={renderIcon} />;
  };

继续观察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 <SafeAreaView style={tabBarStyle} forceInset={safeAreaInset}>
      {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 <ButtonComponent key={route.key} onPress={() => onTabPress({ route })} testID={testID} accessibilityLabel={accessibilityLabel} style={[styles.tab, { backgroundColor }, this._shouldUseHorizontalLabels() ? styles.tabLandscape : styles.tabPortrait, tabStyle]}>
          {this._renderIcon(scene)}
          {this._renderLabel(scene)}
        </ButtonComponent>;
      })}
    </SafeAreaView>;

初始页面的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 <View style={{
        height: 30,
        backgroundColor: '#FFFFFF'
      }}/>
    }

图3