使用 Material Top Tab Navigator 有条件地隐藏 Expo Router 中的选项卡

Question

我在 React Native 应用程序中使用 Expo Router 和 Material Top Tab Navigator。我试图根据特定标准有条件地隐藏选项卡，但设置

href: null

似乎没有按预期工作。

这是我的代码的简化版本：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { Tabs } from 'expo-router';

const Tab = createMaterialTopTabNavigator();

// ... other imports and components

export function MyTopTabNavigator({ route }) {
  // ... other logic

  return (
    <Tab.Navigator>
      <Tabs.Screen name="Tab1" />
      <Tabs.Screen name="Tab2" />
    </Tab.Navigator>
  );
}

我无法根据布尔值有条件地显示选项卡

Tab2

（比方说

enableTab2

）。使用 Material Top Tab Navigator 有条件地隐藏 Expo Router 中的选项卡的正确方法是什么？

Answer 1

您是否尝试过直接在 组件上使用条件渲染？

<Tab.Navigator>
  <Tabs.Screen name="Tab1" />
  { enableTab2 && <Tabs.Screen name="Tab2" /> }
</Tab.Navigator>