Есть ли возможность отключить кнопки панели вкладок - PullRequest
Новая
       6

Есть ли возможность отключить кнопки панели вкладок

1 голос
/ 12 марта 2020

В моем собственном приложении «Реакция» у меня есть компонент маршрутизатора, который использует реагирование-навигация-материал-вкладки внизу.

В этом компоненте я создал его следующим образом. 

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 на экранах? Как отключить вкладки? Пожалуйста, помогите.

Ответы [ 2 ]

1 голос
/ 12 марта 2020

Что вы используете для глобального управления состоянием в вашем приложении, пожалуйста, сохраняйте статусный профиль статуса одобрен или нет внутри вашего глобального состояния. Затем вы можете переопределить 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();
  },})
0 голосов
/ 13 марта 2020

Вы можете попробовать использовать реквизиты tabBarComponent, доступные во втором параметре для createBottomTabNavigator.

Вы можете включить или отключить кнопку, как вам нравится, но, пожалуйста, посмотрите примечание ниже.

Я использовал собственную базу Нижний колонтитул, вы можете использовать ваши предпочтительные компоненты. 

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>
          )
        }
      }
    )

Примечание: Если вы хотите динамически менять свои кнопки (элементы панели вкладок), вы не можете этого сделать, так как эти кнопки назначаются на основе индекса.

...