Реагировать на навигацию по основной вкладке

Question

У меня есть собственный реактивный проект, и на одном из экранов я использую навигацию по нижней вкладке реакции-навигации.

У меня вопрос, могу ли я динамически изменить один из значков в нем в зависимости от того, на каком экране я нахожусь??Например, я хочу, чтобы средний значок был динамичным и отличался для всех других вкладок, а когда пользователь нажимает какую-то вкладку, я хочу, чтобы этот значок изменился и имел уникальную функциональность.

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

Ищем оптимальное решение.Любой ответ приветствуется.Спасибо.

Answer 1

Для этого вам нужно немного настроить вкладку, для этого вам нужно использовать пользовательские defaultNavigationOptions в createBottomTabNavigator. defaultNavigationOptions принимает функцию компонента React, где вы получаете реквизит, такой как focused, tintColor, вы можете сделать некоторые манипуляции, используя это. Если вкладка сфокусирована, вы получите истинное значение, основанное на том, что вы можете изменить свой значок. Например:

const customTabs = ({ navigation }) => ({
  tabBarIcon: ({ focused, horizontal, tintColor }) => {
    const { routeName } = navigation.state;
    if (routeName === 'PageOne') {
      return <View>{focused ? <Icon name='focused' /> : <Icon name='unfocused' /> }</View>
    } else if (routeName === 'PageTwo') {
      return <Text>{routeName} One</Text>
    } else if (routeName === 'PageThree') {
      return <Text>{routeName} One</Text>
    }
  }
});

Я добавил небольшой пример, не мог понять, как добавить значок к нему, поэтому, просто изменив текст, вы можете заменить его на Icon, это сработает. https://snack.expo.io/@subkundu/icon-focused

Дайте мне знать, если это работает. Удачного кодирования. :)