React Navigation V5 не получает сфокусированный параметр при использовании пользовательского компонента bottomTab - PullRequest
Новая
       74

React Navigation V5 не получает сфокусированный параметр при использовании пользовательского компонента bottomTab

1 голос
/ 24 марта 2020

В настоящее время я пытаюсь внедрить пользовательский дизайн tabBar в свое собственное приложение реагировать, которое использует React Navigation 5 в качестве библиотеки навигации. Все работает правильно, за исключением того, что мои tabBarIcons не получают никаких реквизитов, поэтому я не могу определить, должен ли я показывать активный или неактивный tabIcon. Всякий раз, когда я использую панель вкладок по умолчанию, я получаю реквизиты, поэтому в моей настраиваемой панели вкладок должно быть что-то не так. Я следовал документам и нашел только инструкцию для генерации события tabPress. Однако я считаю, что мне следует испускать больше событий, чтобы получить правильную сфокусированную опору. Я настроил навигатор так: 

const Tabs = createBottomTabNavigator();

export default () => (
  <Tabs.Navigator tabBar={TabBarComponent} initialRouteName="Home">
    <Tabs.Screen
      name="Home"
      component={HomeScreen}
      options={{
        tabBarIcon: ({ focused }) => {
          // The props here are {}, so focused is undefined.
          const icon = focused
            ? require('images/iconOverviewRed.png')
            : require('images/iconOverviewGrey.png');

          return <Image source={icon} />;
        },
      }}
    />
    <Tabs.Screen
      name="Overview"
      component={OverviewScreen}
      options={{
        tabBarIcon: props => {
          console.log(props);
          return <Image source={require('images/logoRed.png')} />;
        },
      }}
    />
    <Tabs.Screen
      name="Account"
      component={AccountScreen}
      options={{
        tabBarIcon: ({ focused }) => {
          const icon = focused
            ? require('images/iconAccountRed.png')
            : require('images/iconAccountGrey.png');

          return <Image source={icon} resizeMethod="resize" />;
        },
      }}
    />
  </Tabs.Navigator>
);

И это мой пользовательский компонент tabBar: 

const TabBar = ({ navigation, state, descriptors }: any) => {
  return (
    <View style={styles.container}>
      {state.routes.map((route: any) => {
        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!event.defaultPrevented) {
            navigation.dispatch({
              ...TabActions.jumpTo(route.name),
              target: state.key,
            });
          }
        };

        return (
          <TabIcon
            key={route.key}
            Icon={descriptors[route.key].options.tabBarIcon}
            onPress={onPress}
            isBig={route.name === 'Home'}
          />
        );
      })}
    </View>
  );
};

const TabIcon = ({ onPress, Icon, key, isBig }: any) => {
  return (
    <TouchableWithoutFeedback key={key} onPress={onPress}>
      <View style={isBig ? styles.bigTab : styles.defaultTab} key={key}>
        <Icon />
      </View>
    </TouchableWithoutFeedback>
  );
};

Заранее спасибо.

1 Ответ

1 голос
/ 25 марта 2020

descriptors[route.key].options просто дает вам варианты, как вы их указали. Если вы зарегистрируете значение descriptors[route.key].options.tabBarIcon, вы увидите, что оно печатает указанную вами функцию.

В вашей пользовательской панели вкладок вы можете использовать эту опцию по своему усмотрению. Поскольку это функция здесь, вам придется вызывать ее и передавать нужные аргументы. 

descriptors[route.key].options.tabBarIcon({ focused: state.index === index })

Это также означает, что вы полностью контролируете опцию. Вы можете поставить любой тип, который вам нужен, функцию, оператор require и т. Д. c. а затем использовать это. Вам также не нужно называть это tabBarIcon, вы можете называть это как хотите.

...