Программно скрывать и отображать отдельные вкладки в панели вкладок React Native Router Flux - PullRequest
Новая
       54

Программно скрывать и отображать отдельные вкладки в панели вкладок React Native Router Flux

0 голосов
/ 25 февраля 2019

В моем приложении есть панель вкладок, использующая React Native Router Flux.Есть пара случаев, когда было бы очень полезно скрывать или показывать конкретные вкладки на основе текущего пользователя.Основные из них, с которыми я столкнулся:

  • AB тестирование новых вкладок для определенных пользователей
  • Отображение специальной вкладки администратора для определенных пользователей с определенными привилегиями

Библиотекаactate-router-flux не поддерживает никаких опций для этого, как я вижу.Как я могу достичь этой функциональности?

1 Ответ

0 голосов
/ 25 февраля 2019

Компонентом панели вкладок по умолчанию в Reaction-native-router-flux является только компонент из библиотеки react-navigation-tabs.Вы можете импортировать этот компонент непосредственно в свой код, настроить его по мере необходимости, а затем передать его в react-native-router-flux через tabBarComponent prop ( задокументировано здесь ).

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

import React from 'react'
import { BottomTabBar } from 'react-navigation-tabs'
import { View, TouchableWithoutFeedback } from 'react-native'
import { connect } from 'react-redux'

const HiddenView = () => <View style={{ display: 'none' }} />
const TouchableWithoutFeedbackWrapper = ({
  onPress,
  onLongPress,
  testID,
  accessibilityLabel,
  ...props
}) => (
  <TouchableWithoutFeedback
    onPress={onPress}
    onLongPress={onLongPress}
    testID={testID}
    hitSlop={{
      left: 15,
      right: 15,
      top: 5,
      bottom: 5,
    }}
    accessibilityLabel={accessibilityLabel}
  >
    <View {...props} />
  </TouchableWithoutFeedback>
)
const TabBarComponent = props => (
  <BottomTabBar
    {...props}
    getButtonComponent={({ route }) => {
      if (
        (route.key === 'newTab' && !props.showNewTab) ||
        (route.key === 'oldTab' && props.hideOldTab)
      ) {
        return HiddenView
      }
      return TouchableWithoutFeedbackWrapper
    }}
  />
)

export default connect(
  state => ({ /* state that you need */ }),
  {},
)(TabBarComponent)

А затем просто импортировать и использовать это в моем компоненте вкладок: 

<Tabs
  key="main"
  tabBarComponent={TabBarComponent} // the component defined above
  ...

Подробно рассмотрим, куда эти вещи передаются

Глядя на строку источника response-native-router-flux, этоиспользуя createBottomTabNavigator из библиотеки react-navigation и не передавая ни одного компонента, если вы не передаете пользовательский tabBarComponent.Метод createBottomTabNavigator в react-navigation происходит из из этой строки библиотеки и фактически определяется в react-navigation-tabs.Теперь мы можем здесь увидеть в react-navigation-tabs, что, если tabBarComponent не был передан, он просто использует BottomTabBar, также определенный в react-navigation-tabs.Этот BottomTabBar, в свою очередь, принимает пользовательский рендеринг кнопок с вкладками через реквизит , называемый getButtonComponent.

...