5

如何从 TabNavigator 中隐藏某些 TabBar 项。是否有某个TabBarOptions选项，它有这样的visible键（真/假）？

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

4 回答 4

2

我的解决方案是返回一个自定义选项卡按钮，它是：高度和宽度设置为 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

    }}
/>
于 2021-06-11T02:32:39.227 回答
1

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

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

作者：来自GitHub的@ragnorc

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*/
        }
    },
});
于 2018-05-12T23:48:39.070 回答
1

问题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} />
于 2019-05-14T22:41:00.230 回答
0

单个选项卡没有这样的“可见”选项，尽管有人谈论它的实现。

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

请参阅此处以了解此方法的巧妙实现。

于 2017-12-23T17:36:08.693 回答