Скрытие определенных вкладок в реагирующей навигации bottomTabBarNavigation - PullRequest
Новая
       41

Скрытие определенных вкладок в реагирующей навигации bottomTabBarNavigation

0 голосов
/ 04 декабря 2018

Представьте, что у меня есть эта структура для моей панели вкладок: 

const TabBarRoute = {
    Home: HomeStack,
    Orders: OrdersStack,
    Trending: TrendingStack,
    TopSelling: TopSellingStack
}

Я хочу показать только три вкладки (ордера, тренды, TopSelling) в навигаторе нижней вкладки, как я могу добиться этого с помощью react-navigation версия 3.x?

Одна мысль, которая приходит мне в голову, состоит в том, что я создаю вершину stackNavigator и гнездо HomeStack вместе с моим bottomTabNavigator внутри нее и устанавливаю начальный маршрут вершины.stackNavigator до Home, но проблема этого подхода в том, что он не показывает панель вкладок.

Ответы [ 2 ]

0 голосов
/ 12 июля 2019

В этом примере используется createBottomTabNavigator, но я предполагаю, что применяются те же правила.Требуется переопределить tabBarButtonComponent компонентом Custom, который возвращает ноль, когда пользователь не имеет доступа к данной вкладке.

const Config = {
    allow_locations: true,
    allow_stations: true
}

LocationsStackNavigator.navigationOptions = ({navigation}) => {
  return {
    tabBarLabel: 'Locations',
    tabBarTestID: 'locations',
    tabBarIcon: ({focused}) => (
      <TabBarIcon
        focused={focused}
        name={'md-settings'}/>
    )
  }
};

const MyTabNav = createBottomTabNavigator(
  {
    LocationStackNavigator,
    StationsStackNavigator,
    OrdersStackNavigator,
    SettingsStackNavigator
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarButtonComponent: CustomTabButton
    })
  }
);


class CustomTabButton extends React.Component {
  render() {    
    const {
      onPress,
      onLongPress,
      testID,
      accessibilityLabel,
      ...props
    } = this.props;

    if(testID === 'locations' && !Config.allow_locations) return null;
    if(testID === 'stations' && !Config.allow_stations) return null;

    return <TouchableWithoutFeedback onPress={onPress} onLongPress={onLongPress} testID={testID} hitSlop={{ left: 15, right: 15, top: 5, bottom: 5 }} accessibilityLabel={accessibilityLabel}>
        <View {...props} />
      </TouchableWithoutFeedback>;
  }
}
0 голосов
/ 04 декабря 2018

если вы хотите иметь динамические элементы, которые они могут изменить в зависимости от вашей ситуации, вы можете сделать это двумя способами: сначала вы можете объявить компонент как родительский для вашего компонента реагирования-навигации, затем

  1. создайте хранилище для ваших предметов и установите их как @observable и меняйте их всякий раз, когда вы хотите

  2. объявляйте ваши элементы как состояние вашего родительского компонента и передавайте их вашемуреагировать на навигацию

В этих двух решениях каждый раз, когда изменения ваших элементов вызывали повторный рендеринг компонента с новыми значениями

...