是否有禁用标签栏按钮的选项

Question

在我的本机应用程序中，我有一个使用 react-navigation-material-bottom-tabs 的路由器组件。

在那个组件中，我像这样创建了它。

const tabNavigator = createMaterialBottomTabNavigator({
  home: {
    screen: Home,
    navigationOptions: ({ navigation }) => ({
        title: ''
    })
  },
  createCampaign: {
    screen: CreateCampaign,
    navigationOptions: ({ navigation }) => ({
        title: '',
        tabBarVisible: false
    })
  },
  settings: {
    screen: AllSettings,
    navigationOptions: ({ navigation }) => ({
        title: ''
    })
  }
});

这工作正常。但我想在某些情况下禁用此栏的某些选项卡。例如，如果配置文件尚未获得批准，请禁用设置选项卡。有什么办法可以在我的屏幕上执行此操作吗？（最好不在路由器中，因为我无法在路由器中发送 API 请求）。如何访问屏幕中的 tabBar 选项？如何禁用选项卡？请帮忙。

Answer 1

因为Version 5.x有一种新方法可以做到。

<Tabs.Screen
  name="Chat"
  component={Chat}
  listeners={{
    tabPress: e => {
      // Prevent default action
      e.preventDefault();
    },
  }}
/>

这是文档的参考链接：https : //reactnavigation.org/docs/navigation-events/

Answer 2

您在应用程序内使用什么进行全局状态管理，请将状态天气配置文件是否已批准存储在您的全局状态内。然后您可以覆盖 tabBarOnPress 以检查用户是否获得批准并执行相应的操作，代码片段如下。

const Tab_Navigator = createBottomTabNavigator({
First:{
    screen: First,
},
Second:{
    screen: Second,
},
Third:{
    screen: Third,
}
}, defaultNavigationOptions: ({ navigation }) => ({
  tabBarOnPress: ({ navigation, defaultHandler }) => {
    if (
      navigation.state.routeName === "Second" ||
      navigation.state.routeName === "Third"
    ) {
      return null;
    }
    defaultHandler();
  },})