RN笔记-TabNavigator隐藏Tabbar

最新推荐文章于 2024-06-25 02:32:34 发布

barnett_y

最新推荐文章于 2024-06-25 02:32:34 发布

阅读量6.1k

点赞数

分类专栏：【React-Native2点滴知识】

【React-Native2点滴知识】专栏收录该内容

698 篇文章

订阅专栏

本文介绍了一种通过动态调整TabBar高度来实现其显示与隐藏的方法。该方法适用于需要灵活切换TabBar状态的应用场景。文章详细展示了如何在React Native中实现这一功能，包括定义初始状态、设置TabNavigator样式及配置页面间的跳转逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rn页面之间跳转时默认一直显示tabbar，然而在开发过程中必须要切换tabbar的显示和隐藏。在尝试过很多次之后终于找到了解决办法。解决的思路是，动态改变tabbar的高度。

定义tabbar的显示高度tabBarHeight

  getInitialState() {
    return {
      selectedTab:'classCircle',
      tabBarHeight: 49
    }
  },

  handleTabBar(state){
    this.setState({
      tabBarHeight: state ? 49 : 0
    });
  },

设置TabNavigator 的tabBarStyle样式，并在initialRoute 中定义tabar的 hide和show属性。以班级圈模块为例。

  render() {
    return (
      <TabNavigator
        tabBarStyle={{height: this.state.tabBarHeight, overflow: 'hidden'}}
        sceneStyle={{paddingBottom: this.state.tabBarHeight}}
        >
        { /*资源*/ }
        <TabNavigator.Item
          title="资源"
          renderIcon={() => <Image source={require('./../Source/tabbar_src.png')} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={require('./../Source/tabbar_src_h.png')} style={styles.iconStyle} />}
          onPress={() => {this.setState({ selectedTab: 'resource' })}}
          selected={this.state.selectedTab === 'resource'}
          >
          <Navigator
            initialRoute={{name:'资源',component:Resource}}
            configureScene={(route,navigator)=>{
              return Navigator.SceneConfigs.PushFromRight;
            }}
            renderScene={(route,navigator)=>{
              let Component = route.component;
              return <Component {...route.passProps} navigator={navigator}/>;
            }}
          />
        </TabNavigator.Item>
        { /*消息*/ }
        <TabNavigator.Item
          title="消息"
          renderIcon={() => <Image source={require('./../Source/tabbar_message.png')} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={require('./../Source/tabbar_message_h.png')} style={styles.iconStyle} />}
          onPress={() => {this.setState({ selectedTab: 'contact' })}}
          selected={this.state.selectedTab === 'contact'}
          >
            <Navigator
              initialRoute={{name:'消息',component:Contact}}
              configureScene={(route,navigator)=>{
                return Navigator.SceneConfigs.PushFromRight;
              }}
              renderScene={(route,navigator)=>{
                let Component = route.component;
                return <Component {...route.passProps} navigator={navigator}/>;
              }}
            />
        </TabNavigator.Item>
        { /*班级圈*/ }
        <TabNavigator.Item
          title="班级圈"
          renderIcon={() => <Image source={require('./../Source/tabbar_circle.png')} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={require('./../Source/tabbar_circle_h.png')} style={styles.iconStyle} />}
          onPress={() => {this.setState({ selectedTab: 'classCircle' })}}
          selected={this.state.selectedTab === 'classCircle'}>
          <Navigator
            initialRoute={{
              name:'班级圈',
              component:ClassCircle,
              passProps: {
                tabBar: {
                  hide: () => this.handleTabBar(false),
                  show: () => this.handleTabBar(true)
                }
              }
            }}
            configureScene={(route,navigator)=>{
              return Navigator.SceneConfigs.PushFromRight;
            }}
            renderScene={(route,navigator)=>{
              let Component = route.component;
              return <Component {...route.passProps} navigator={navigator}/>;
            }}
          />
        </TabNavigator.Item>
        { /*应用*/ }
        <TabNavigator.Item
          title="应用"
          renderIcon={() => <Image source={require('./../Source/tabbar_app.png')} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={require('./../Source/tabbar_app_h.png')} style={styles.iconStyle} />}
          onPress={() => {this.setState({ selectedTab: 'appCenter' })}}
          selected={this.state.selectedTab === 'appCenter'}
          >
            <Navigator
              initialRoute={{name:'应用',component:AppCenter}}
              configureScene={(route,navigator)=>{
                return Navigator.SceneConfigs.PushFromRight;
              }}
              renderScene={(route,navigator)=>{
                let Component = route.component;
                return <Component {...route.passProps} navigator={navigator}/>;
              }}
            />
        </TabNavigator.Item>
        { /*我的*/ }
        <TabNavigator.Item
          title="我的"
          renderIcon={() => <Image source={require('./../Source/tabbar_mine_h.png')} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={require('./../Source/tabbar_mine.png')} style={styles.iconStyle} />}
          onPress={() => {this.setState({ selectedTab: 'mine' })}}
          selected={this.state.selectedTab === 'mine'}
          >
            <Navigator
              configureScene={ this._configureScene }
              initialRoute={{
                name:'我的',
                component:Mine,
                passProps: {
                  tabBar: {
                    hide: () => this.handleTabBar(false),
                    show: () => this.handleTabBar(true)
                  }
                }
              }}
              configureScene={(route,navigator)=>{
                return Navigator.SceneConfigs.PushFromRight;
              }}
              renderScene={(route,navigator)=>{
                let Component = route.component;
                return <Component {...route.passProps} navigator={navigator}/>;
              }}
            />
        </TabNavigator.Item>

      </TabNavigator>
    );
  }

至此Tabbar的隐藏和显示属性已经定义完毕，接下来就要在push页面时做如下操作。

  pushToDetail(url){
      if (url == 'Consult') {
        this.props.navigator.push(
          {
            component:Consult,//要跳转的版块
            passProps:{
              'url':url,
              tabBar: {
                hide: () => this.props.tabBar.hide(),
                show: () => this.props.tabBar.show()
              }
            }
          }
        );
      }
    },

需要了解Component组件的生命周期，componentWillMount方法是在组件将要被渲染时调用，componentWillUnmount方法是在组件将要被销毁时调用。

  // 渲染组件时隐藏tabbar 
  componentWillMount(){
    this.props.tabBar.hide();
  },

  // 销毁组件时显示tabbar
  componentWillUnmount(){
    this.props.tabBar.show();
  },

附效果图：

1.gif