React Navigation TabNavigator的navigationOptions中onPress/onLongPress失效求助

嗨，我明白你现在的困扰——直接在页面的static navigationOptions里加onPress和onLongPress完全没效果，对吧？其实问题出在你找错配置位置了：页面的navigationOptions根本不支持这两个属性，React Navigation不会识别这些配置项。

别担心，不用复杂的实现，我们用自定义Tab按钮的方式就能轻松搞定，完全符合你的需求（不用Icon、不用Redux、不用TabBarBottom），下面分两种常用的React Navigation版本给你方案：

如果你用的是React Navigation 5/6版本（目前主流） #

直接在创建Tab导航的时候，给每个Tab页面配置tabBarButton，用React Native的TouchableOpacity（或者TouchableHighlight）包裹文本，自己处理点击和长按事件：

import { TouchableOpacity, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      {/* 第一个Tab页面 */}
      <Tab.Screen
        name="Home"
        component={HomeScreen} // 替换成你的页面组件
        options={{
          tabBarButton: (props) => (
            <TouchableOpacity
              {...props} // 继承Tab按钮的默认样式、状态等属性
              onPress={() => {
                alert("it's a tap!");
                // 别忘了调用props.onPress()，不然点击不会切换到对应页面
                props.onPress();
              }}
              onLongPress={() => alert("it's a Long Press!")}
            >
              <Text>Home</Text> {/* 替换成你的Tab文本 */}
            </TouchableOpacity>
          )
        }}
      />

      {/* 第二个Tab页面，逻辑完全一样 */}
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabBarButton: (props) => (
            <TouchableOpacity
              {...props}
              onPress={() => {
                alert("it's a tap!");
                props.onPress();
              }}
              onLongPress={() => alert("it's a Long Press!")}
            >
              <Text>Profile</Text>
            </TouchableOpacity>
          )
        }}
      />
    </Tab.Navigator>
  );
}

关键说明： #

• 我们用TouchableOpacity自定义了Tab的按钮容器，这样就能直接绑定onPress和onLongPress事件
• 一定要调用props.onPress()，这是Tab导航自带的页面切换逻辑，不然点击按钮只会弹窗，不会切换页面
• 如果需要跳转到其他页面而不是弹窗，直接把alert换成navigation.navigate('目标页面名')就行

如果你用的是React Navigation 4版本（旧版本） #

v4里没有直接的tabBarButton配置，但可以用tabBarOnPress处理点击事件，长按的话需要稍微自定义一下TabBar，但如果只需要点击弹窗，用下面的方法就行：

import { createBottomTabNavigator } from 'react-navigation-tabs';

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarOnPress: ({ navigation, defaultHandler }) => {
        alert("it's a tap!");
        defaultHandler(); // 调用默认的页面切换逻辑
      }
    }
  },
  // 其他Tab页面同理
  Profile: {
    screen: ProfileScreen,
    navigationOptions: {
      tabBarLabel: 'Profile',
      tabBarOnPress: ({ navigation, defaultHandler }) => {
        alert("it's a tap!");
        defaultHandler();
      }
    }
  }
});

关于长按： #

v4里没有原生支持的tabBarOnLongPress，如果需要长按事件，还是建议升级到v5+版本，或者用自定义TabBar组件（但会稍微复杂一点），不过如果只是简单需求，v5+的方案更省心。

这个方案完全满足你的需求：不用复杂代码、不用额外依赖，只需要自定义Tab按钮就能实现弹窗或页面跳转的功能。

内容的提问来源于stack exchange，提问作者MoKhajavi75