如何在 React Native 选项卡视图中隐藏一些选项卡?
how can I hide some tabs on react native tab view?
我在我的应用程序上使用了标签视图反应本机,我想通过更改设置来隐藏一些标签,但我不知道该怎么做。
现在,我有 3 个选项卡:个人、公司和 material,在设置中我可以检查选项卡,例如当公司未被选中时不应出现在选项卡视图中
constructor(props) {
super(props);
this.state = {
index: 0,
routes: [
{ key: 'personal', title: 'personal' },
{ key: 'company', title: 'company' },
{ key: 'material', title: 'material' }
],
};
}
_renderTabBar = props => {
return (
<View>
<TabBar
{...props}
indicatorStyle={{backgroundColor: 'white'}}
renderIcon={
props => this._getTabBarIcon(props)
}
onTabPress={ tab => this.changeTabs(tab)}
style={{backgroundColor: "#5243af"}}
tabStyle={styles.tabStyle}
labelStyle={{fontSize: Fonts.moderateScale(15), marginBottom: 10}}
contentContainerStyle={{height: Metrics.HEIGHT * 0.1, elevation: 0}}
/>
</View>
);
};
<TabView style={{ backgroundColor: 'white'}}
navigationState={this.state}
renderTabBar={ this._renderTabBar}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width}}
renderScene={this._renderScene} />
您应该自定义自己的标签栏并根据条件管理标签可见性,要了解更多信息,请遵循此 link
Hide TabBar item in TabNavigator
它会帮助你
tabBar hidden =>
<TabView
renderToTabbar={ ()=> <></> }
/>
我在我的应用程序上使用了标签视图反应本机,我想通过更改设置来隐藏一些标签,但我不知道该怎么做。 现在,我有 3 个选项卡:个人、公司和 material,在设置中我可以检查选项卡,例如当公司未被选中时不应出现在选项卡视图中
constructor(props) {
super(props);
this.state = {
index: 0,
routes: [
{ key: 'personal', title: 'personal' },
{ key: 'company', title: 'company' },
{ key: 'material', title: 'material' }
],
};
}
_renderTabBar = props => {
return (
<View>
<TabBar
{...props}
indicatorStyle={{backgroundColor: 'white'}}
renderIcon={
props => this._getTabBarIcon(props)
}
onTabPress={ tab => this.changeTabs(tab)}
style={{backgroundColor: "#5243af"}}
tabStyle={styles.tabStyle}
labelStyle={{fontSize: Fonts.moderateScale(15), marginBottom: 10}}
contentContainerStyle={{height: Metrics.HEIGHT * 0.1, elevation: 0}}
/>
</View>
);
};
<TabView style={{ backgroundColor: 'white'}}
navigationState={this.state}
renderTabBar={ this._renderTabBar}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width}}
renderScene={this._renderScene} />
您应该自定义自己的标签栏并根据条件管理标签可见性,要了解更多信息,请遵循此 link
Hide TabBar item in TabNavigator
它会帮助你
tabBar hidden =>
<TabView
renderToTabbar={ ()=> <></> }
/>