9

在我的 react native 应用程序中，我有一个使用 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 选项？如何禁用标签？请帮忙。

4

3 回答 3

15

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

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

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

于 2020-10-05T03:01:48.103 回答
4

您在应用程序中使用什么进行全局状态管理，请在您的全局状态中存储状态天气配置文件是否已批准。然后您可以覆盖 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();
  },})
于 2020-03-12T09:31:17.120 回答
0

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

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

于 2020-03-13T09:20:23.240 回答