Реагировать на встроенную навигацию: показывать ярлык только для выбранного элемента - PullRequest
Новая
       86

Реагировать на встроенную навигацию: показывать ярлык только для выбранного элемента

0 голосов
/ 04 мая 2020

Я просто пытаюсь условно показать / скрыть метку для элементов навигатора вкладок, основываясь на том, сфокусированы они или нет. Я могу изменить цвет оттенка значка следующим образом: 

tabBarIcon: ({ focused }) => {
   const icon = <Image
     style={{
        width: 25,
        height: 25,
        tintColor: focused ? colors.primary : colors.inactive
     }}
     source={require('./assets/account.png');}
     /> ;

     return icon

Но попытка изменить логическое значение showLabel на основе той же характеристики не работает? 

tabBarOptions={{
       activeTintColor: colors.primary,
       inactiveTintColor: colors.inactive,
       showLabel: ({ focused }) => {
         return focused ? true : false
       },

Ярлыки появляются для всех элементов на панели вкладок.

Любая / вся помощь приветствуется!

1 Ответ

0 голосов
/ 04 мая 2020

Разобрался. 

    <Tab.Navigator 
      screenOptions={({ route }) => ({
        tabBarLabel: ({ focused }) => {
          return <Text style={{fontSize: 14, fontWeight: '600', color: colors.primary}}>{focused ? route.name : ""}</Text>
        },
        tabBarIcon: ({ focused }) => {
          let iconSource;

          if (route.name === 'Map') {
            iconSource = require('./assets/public.png');
          } else if (route.name === 'List') {
            iconSource = require('./assets/numbered.png');
          } else if (route.name === 'Log') {
            iconSource = require('./assets/menu.png');
          } else if (route.name === 'Talk') {
            iconSource = require('./assets/chat.png');
          } else if (route.name === 'Account') {
            iconSource = require('./assets/account.png');
          } 

          const icon = <Image
            style={{
              width: 25,
              height: 25,
              tintColor: focused ? colors.primary : colors.inactive,
              marginTop: focused ? 5 : 15
            }}
            source={iconSource}
          /> ;

          return icon
        },
      })}
    >
...