React Navigation tabPress 不包含 PreventDefault

Question

我试图抑制选项卡的默认操作，并显示模式而不是屏幕。

package.json

"@react-navigation/bottom-tabs": "6.5.11",
"@react-navigation/drawer": "6.6.2",
"@react-navigation/native": "6.1.6",
"@react-navigation/stack": "6.2.0",

TabNavigation.js

import React, { useEffect } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

export default function TabNavigation() {
  useEffect(() => {
    return navigation.addListener('tabPress', (e) => {
      console.log('addListener', e);
      // Prevent default behavior
      e.preventDefault();

      // Do something manually
      // ...
    });
  }, [navigation]);

... 

  return (
    <Navigator
      initialRouteName='InboxTab'
      path='dialer'
      tabBar={renderTabBar}
      screenOptions={{
        allowFontScaling: false,
        headerShown: false,
      }}
    >
      <Screen
        name='MenuTab'
        component={RenderMenuIcon}
        options={({ route }) => {
          return {
            tabBarLabel: i18n('Menu'),
            tabBarIcon: RenderMenuIcon,
            tabBarVisible: setTabBarVisible(route),
          };
        }}
        listeners={({ navigation, route }) => ({
          tabPress: (e) => {
            console.log(e);
            // Prevent default action
            e.preventDefault();

            // Do something with the `navigation` object
            navigation.openDrawer();
          },
        })}
      />
    </Navigator>
  );
}

我遇到的问题是

e.preventDefault() is undefined

控制台输出是

{target: "MenuTab-7dSuEnww56CNR3M4Cls8V", type: "tabPress"}

我一直在浏览这些文档：https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen但没有运气解决为什么

tabPress

被调用但是日志中没有出现

preventDefault

函数。

任何想法或想法将不胜感激！

Answer 1

您正在使用自定义选项卡栏组件。正确实施该活动取决于您。要使用

preventDefault

，您需要通过

canPreventDefault: true

。

这是文档中的示例：

const event = navigation.emit({
  type: 'tabPress',
  target: route.key,
  canPreventDefault: true,
});

if (!isFocused && !event.defaultPrevented) {
  navigation.navigate(route.name, route.params);
}

https://reactnavigation.org/docs/bottom-tab-navigator/#tabbar