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

Question

在我的 React 本机应用程序中，我有一个使用 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

您在应用程序中使用什么进行全局状态管理，请将状态天气配置文件是否已批准存储在您的全局状态中。然后您可以重写 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();
  },})

Answer 2

您可以尝试在 createBottomTabNavigator 的第二个参数中使用 tabBarComponent 道具。

您可以根据需要启用或禁用按钮，但请查看下面的注释。

我使用的是原生基础页脚，你可以使用你喜欢的组件。

import { Footer, FooterTab } from 'native-base'  
  const HomeScreen = createBottomTabNavigator(
        {
    First:{
        screen: First,
    },
    Second:{
        screen: Second,
    },
    Third:{
        screen: Third,
    }
      },
      {
        tabBarComponent: props => {
          return (
            <Footer>
              <FooterTab>
                <Button
                  vertical
                  active={props.navigation.state.index === 0}
                  onPress={() => props.navigation.navigate(actions.First)}
                >
                </Button>
                <Button
                  vertical
                  active={props.navigation.state.index === 1}
                  onPress={() => props.navigation.navigate(actions.Second)}
                >
                </Button>
                <Button
                  vertical
                  active={props.navigation.state.index === 2}
                  onPress={() => props.navigation.navigate(actions.Third)}
                >
                </Button>
              </FooterTab>
            </Footer>
          )
        }
      }
    )

注意：如果您想动态更改按钮（标签栏元素），则不能这样做，因为这些按钮是根据索引分配的。

Answer 3

对于 Version 5.x，有一种新方法可以做到。

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

这是对文档的引用 link：https://reactnavigation.org/docs/navigation-events/

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

Is there a option to disable tabbar buttons

react-native

react-navigation-bottom-tab