[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>)
}