使用自定义 bottomTab 组件时，React Navigation V5 不接收焦点参数

Question

我目前正在尝试在我的 React 本机应用程序中实现自定义 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>
  );
};

提前致谢。

Answer 1

descriptors[route.key].options 只提供您指定的选项。如果您记录 descriptors[route.key].options.tabBarIcon 的值，您会看到它打印了您指定的函数。

在您的自定义标签栏中，您可以根据需要使用该选项。因为这里是一个函数，所以你必须调用它并传递所需的参数。

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

这也意味着您可以完全控制该选项。您可以直接放置您想要的任何类型、函数、require 语句等，然后使用它。你也不一定要叫它tabBarIcon，你可以随便叫它。

使用自定义 bottomTab 组件时，React Navigation V5 不接收焦点参数

React Navigation V5 does not receive focused parameter when using custom bottomTab component

react-native

react-navigation

react-navigation-v5

react-navigation-bottom-tab