Как показать индикатор на всех вкладках по умолчанию в реагирующей навигации - PullRequest
Новая
       10

Как показать индикатор на всех вкладках по умолчанию в реагирующей навигации

0 голосов
/ 25 июня 2018

У меня есть навигация на основе вкладок в одном из моих собственных встроенных компонентов. Я использую React Navigation v1. React Navigation показывает индикатор вкладки только для текущей активной вкладки.

enter image description here

Однако я хочу, чтобы на каждой вкладке по умолчанию отображался индикатор вкладки (нижняя граница вкладки), но, разумеется, с разными цветами. А при активации каждая вкладка будет показывать немного другой оттенок цвета.

Я пробовал использовать React Navigation v1, v2, Native Base. Не могу найти способ.

Я хочу панель вкладок точно так же, как это изображение.

enter image description here

В React Navigation у нас есть что-то вроде этого: 

TabNavigator(
  { 
    Tab1: { screen: Tab1Component },
    Tab2: { screen: Tab2Component }
  },
  {
    tabBarComponent: TabBarTop,
    tabBarPosition: 'top',
    tabBarOptions: {
      indicatorStyle: {
        borderBottomColor: '#6495ed',
        borderBottomWidth: 2
      }
    }
  }
)

Но это добавляет стиль ко всем вкладкам. Я хочу, чтобы некоторые возможности применялись на каждой вкладке. То же самое с tabBarUnderlineStyle.

Родной базы

1 Ответ

0 голосов
/ 25 июня 2018

Этот реквизит следует использовать в tabBarOptions внутри TabNavigatorConfig

activeTintColor - цвет метки и значка активной вкладки.

activeBackgroundColor - Цвет фона активной вкладки.

inactiveTintColor - Цвет метки и значка неактивной вкладки.

inactiveBackgroundColor - Цвет фона неактивной вкладки.

...