在 TabNavigator 中隐藏 TabBar 项

Posted 2023-02-19

【中文标题】在 TabNavigator 中隐藏 TabBar 项

【英文标题】：Hide TabBar item in TabNavigator

【发布时间】：2018-06-05 20:32:52

【问题描述】：

如何从 TabNavigator 中隐藏某些 TabBar 项。是否有某个TabBarOptions 选项，它有这样的visible key(true/false)？

const Tabs = TabNavigator(
  Home: 
    screen: Home
  ,
  Profile: 
    screen: Thanks,
    tabBarOptions: 
      visible: false
    ,
  ,
  More: 
    screen: More
  ,
)

【参考方案1】：

我的解决方案是返回一个自定义标签栏按钮，即：高度和宽度设置为 0 的视图，工作正常

<Tabs.Screen name="Refer A Friend" component=WebViewComponent 
    options=
        tabBarButton: () => (
            <View style=width:0, height:0></View>
        ),
        tabBarVisible:false //hide tab bar on this screen

    
/>

更新：正如@Aman Deep 所指出的，您可以只返回 null

<Tabs.Screen name="Refer A Friend" component=WebViewComponent 
    options=
        tabBarButton: () => null,
        tabBarVisible:false //hide tab bar on this screen

    
/>

【讨论】：

很高兴帮助 xD @AmanDeep

【参考方案2】：

tabBarOptions 的问题在于仅隐藏所选屏幕的当前导航（选项卡）。但不隐藏/显示选项卡。

tabBarOptions: 
      visible: false
    

自定义解决方案

我使用createMaterialTopTabNavigator做了一些特殊的课程来实现这一点

export default class CustomTabsNavigator extends Component 
  // Final navigation setup with screens
  TabsNavigation;

  constructor(props) 
    super(props);
    // Only this is necessary if you just want to hide/show without change it.
    this._setScreens();
  
  // This is necessary if you want to hide/show depending on some user behavior
  componentDidUpdate(prevProps) 
    // Add your condition to avoid infinite renders
    if (prevProps.foo === this.props.foo) return;
    this._setScreens();
  
  // Actual code to show/hide based on props.
  _setScreens = () => 
    const  isAdmin  = this.props;
    const screens = ;
    const settings = 
      tabBarOptions: 
        style: ...
      
    ;
    // Set tabs depending on user and state
    if (isAdmin) 
      screens.Dashboard = 
        screen: DashboardScreen,
        navigationOptions:  ... 
      ;
    
    screens.Home =  screen: HomeScreen ;
    this.TabsNavigation = createMaterialTopTabNavigator(screens, settings);
    // Since we are not using setState
    this.forceUpdate();
  ;

  render() 
    // AppContainer is required in react-native version 3.x
    const  props  = this;
    const NavigatorTabs = createAppContainer(this.TabsNavigation);
    return <NavigatorTabs screenProps= ...props  />;
  

标签的实现：

<CustomTabsNavigator isAdmin=true />

【讨论】：

我希望在 tabBar 中隐藏 one route。我就是这样做的：tabBarButton:(props)=> null 在选项中options: tabBarButton:(props)=> null ,//will hide the clickable option tabBarVisible:false // will hide the Tab from this route ,

【参考方案3】：

没有用于从 TabNavigator 隐藏特定项目的“可见”选项。

您需要创建一个 Stacknavigator 和一个 Tabnavigator。在 Stacknavigator 中，您将添加您的“不可见”标签栏项目，并在最后添加其“可见”标签栏项目的 Tabnavigator。

作者：@ragnorc 来自GitHub

const TabsScreen = TabNavigator(
  Profile:  // visible TabBar item
    screen: Thanks,
    tabBarOptions: 
      visible: false
    ,
  ,
  More:  // visible TabBar item
    screen: More
  ,
)

const MainScreenNavigator = StackNavigator(
    Home:  // invisible TabBar item
        screen: Home,
        navigationOptions : 
            header: null /* hide header*/
        
    ,
    Screen 2:  , // invisible TabBar item
    Screen 3:  , // invisible TabBar item
    Screen 4:  , // invisible TabBar item
    TabsScreen:  
        screen: TabsScreen,
        navigationOptions : 
            header: null /* hide header*/
        
    ,
);

【参考方案4】：

虽然有talk of its implementation，但没有针对单个标签的“可见”选项。

可以只呈现某些选项卡。您可以通过将您希望在特定时间出现的特定选项卡传递给 TabNavigator 来动态呈现您的 TabNavigator。您无需将参数硬编码到 TabNavigator()，而是将参数设置为表示要呈现的选项卡的对象，然后您可以随着时间的推移对该对象进行更改。

请参阅here 了解此功能的巧妙实现。