Динамический значок / ярлык панели вкладок в React Navigation V3

Question

У меня есть навигатор с вкладками, в который вложено несколько стековых навигаторов.Я хочу динамически менять значок вкладки / имя вкладки при переходе к различным экранам в стековых навигаторах.Я знаю, что это невозможно из коробки с V3.(https://reactnavigation.org/docs/en/navigation-options-resolution.html). Любые предложения, чтобы обойти это? Tia.

Answer 1

Это возможно отовсюду, потому что navigationOptions это «статический» метод.Просто создайте navigationOptions на вашем экране - Home (пример)

// Определите параметры вкладки на главном экране

 static navigationOptions = ({ navigation }) => {
      return {
        title: 'Home',
        tabBarIcon: ({ focused }) => {
          return <IconComponent name={'Home'} focused={focused}/>; 
        },
        tabBarLabel: "Home"
      };
    };

, затем вызовите этот метод из нужного вам места и измените данные внутри

Home.navigationOptions = {
        tabBarIcon: ({ focused }) => {
           return <AnotherIconComponent name={'LogOut'} focused={focused}/>; 
            }
};

Answer 2

React Navigation V3 содержит некоторые серьезные изменения.Изменение параметров навигации родительского навигатора разрешено только непосредственным дочерним элементам.В моем случае параметры навигации навигаторах вкладок могут быть изменены только стековыми навигаторами.Не с экранов. Перейдите по этой ссылке

Однако, если вы хотите изменить ярлык вкладки / значок вкладки в зависимости от маршрута, вы можете сделать следующее.

const HomeStackNav = createStackNavigator({
  home: { screen: Home },
  Report: { screen: Report }
});

HomeStackNav.navigationOptions = ({ navigation }) => {
  let { routeName } = navigation.state.routes[navigation.state.index];
  let navigationOptions = {};
  if (routeName === 'home') {
    navigationOptions.tabBarLabel = 'Welcome';
    navigationOptions.tabBarIcon = ({ focused }) => <WelcomeIcon focused />;
  } else {
    navigationOptions.tabBarLabel = 'Home';
    navigationOptions.tabBarIcon = ({ focused }) => <HomeIcon focused />;
  }
  return navigationOptions;
}

const TabNav = createBottomTabNavigator({
  HomeTab: HomeStackNav
})

Надеюсь, это поможет.