[react native] react-native-tab-navigator在子Component中隐藏

因为文档只列出了TabBarIOS, 不支持Android，所以github上找到这个组件。

先说下我的页面构造：  入口文件 —> 注册组件（包含Navigator， 跳转到欢迎页）—> 欢迎页(一定时间后replace navigator) —> 底部导航页面

底部导航引用TabNavigator插件react-native-tab-navigator（TabNavigator创建子Component的写法是参考github上一个开源项目）

 <TabNavigator
      hidesTabTouch={false}
      sceneStyle={{paddingBottom: 0}}
      tabBarStyle={tabBarShow ? styles.tabNav : styles.tabNavHide}>
           {this._renderTabItem(HOME_NORMAL, HOME_PRESS, HOME_TAB, '首页', 0, this._createChildView(HOME_TAB))}
           {this._renderTabItem(MESSAGE_NORMAL, MESSAGE_PRESS, SHOP_TAB, '商家', 1, this._createChildView(SHOP_TAB))}
           {this._renderTabItem(ME_NORMAL, ME_PRESS, ME_TAB, '我的', 0, this._createChildView(ME_TAB))}
           {this._renderTabItem(DISCOVER_NORMAL, DISCOVER_PRESS, MORE_TAB, '更多', 0, this._createChildView(MORE_TAB))}
 </TabNavigator>

在renderTabItem中，传入导航项目相关参数—图片(img)、选中图片(selectedImg)、标签(tag)、题目(title)、提示数目(badge)、子视图(childView);

 _renderTabItem(img, selectedImg, tag, title, badgeCount, childView) {
     return (
         <TabNavigator.Item
             selected={this.state.selectedTab===tag}
             renderIcon={()=><Image style={styles.tabIcon} source={img}/>}
             title={title}
             selectedTitleStyle={styles.selectedTitleStyle}
             renderBadge={()=>this._renderBadge(badgeCount)}
             renderSelectedIcon={()=><Image style={styles.tabIcon} source={selectedImg}/>}
             onPress={()=>this.setState({selectedTab:tag})}>
             {childView}
         </TabNavigator.Item>
     );
 }

底部导航图片的切换，通过onPress方法改变state. {childView} 来自 childView, 也就是_createChildView(tag)

在这里，只需要把引入的子视图中传入注册App时的navigator， 然后在navigator中push component ，就可以做到在子视图中隐藏底部导航

 _createChildView(tag) {
     let renderView;
     switch (tag) {
         case HOME_TAB:
             renderView = <HomePage {...this.props} />;
             break;
         case SHOP_TAB:
             renderView = <ShopPage />;
             break;
         case ME_TAB:
             renderView = <MePage />;
             break;
         case MORE_TAB:
             renderView = <MorePage />;
             break;
         default:
             break;
     }
     return (<View style={styles.container}>{renderView}</View>)
 }

大概说下原理（我的理解）： 

注册页的navigator包含了TabNavigator, TabNavigator中包含了childView。

如果在childView中使用新的Navigator push component，那么这个component也属于TabNavigator, 所以这种方式创建的新界面还会包含底部导航。

所以要通过注册页的navigator来push component.