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

【问题标题】：Is there a option to disable tabbar buttons是否有禁用标签栏按钮的选项
【发布时间】：2020-06-24 07:07:27
【问题描述】：

在我的 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 选项？如何禁用标签？请帮忙。

【问题讨论】：

标签： react-native react-navigation-bottom-tab

【解决方案1】：

Version 5.x 有一种新方法。

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

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

【讨论】：

任何禁用涟漪效应的方法
我认为添加一个透明的pressColor 应该可以。让我知道更新答案：<Tabs.Screen tabBarOptions: { pressColor: "transparent" } ... /> 考虑到：pressColor - Color for material ripple (Android >= 5.0 only).
谢谢，我一直在寻找在最后一个选项卡上制作弹出窗口，这对我有用，现在我可以打开弹出窗口并且选项卡没有打开选项卡屏幕，但我仍在添加组件该选项卡是我可以删除组件道具的任何方式
谢谢你，你拯救了我的一天。这正是我想要的。

【解决方案2】：

您在应用内使用什么进行全局状态管理，请将状态天气配置文件存储在您的全局状态中是否已批准。然后你可以重写 tabBarOnPress 来检查用户是否被批准并执行相应的操作，代码如下 sn-p。

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();
  },})

【讨论】：

这个答案对我有帮助。我能够将道具传递给路由器。考虑到该道具的价值，我使用您的代码禁用了选项卡。谢谢。

【解决方案3】：

您可以尝试使用 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>
          )
        }
      }
    )

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

【讨论】：