Question

我在应用程序上使用了本机视图选项卡本机，但我想通过更改设置来隐藏一些选项卡，但我不知道该怎么做。现在，我有3个标签：“个人”，“公司”和“材料”，在设置中，我可以检查这些标签，例如，当未选中“公司”时，不应在标签视图中显示

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} />

Answer 1

您应该制作自己的自定义标签栏，并根据情况管理标签的可见性，以了解更多信息，请点击此链接

Hide TabBar item in TabNavigator

它将为您提供帮助

Answer 2

tabBar hidden =>
    <TabView 
        renderToTabbar={ ()=> <></> }
    />

如何在react native选项卡视图上隐藏一些选项卡？

2 个答案: