rn頁面之間跳轉(zhuǎn)時(shí)默認(rèn)一直顯示tabbar，然而在開發(fā)過程中必須要切換tabbar的顯示和隱藏。在嘗試過很多次之后終于找到了解決辦法。解決的思路是，動態(tài)改變tabbar的高度。

定義tabbar的顯示高度tabBarHeight

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

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

設(shè)置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>
        { /*應(yīng)用*/ }
        <TabNavigator.Item
          title="應(yīng)用"
          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:'應(yīng)用',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的隱藏和顯示屬性已經(jīng)定義完畢，接下來就要在push頁面時(shí)做如下操作。

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

需要了解Component組件的生命周期，componentWillMount方法是在組件將要被渲染時(shí)調(diào)用，componentWillUnmount方法是在組件將要被銷毀時(shí)調(diào)用。

  // 渲染組件時(shí)隱藏tabbar 
  componentWillMount(){
    this.props.tabBar.hide();
  },

  // 銷毀組件時(shí)顯示tabbar
  componentWillUnmount(){
    this.props.tabBar.show();
  },

附效果圖：

1.gif