react-navigation动态显示/隐藏底部导航栏 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 ; };

【react-navigation动态显示/隐藏底部导航栏】继续观察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）。