React Navigation 6.x：如何将navigation对象传递给自定义TabBarButton组件

当然可以实现你的需求！你已经搭好了自定义tabBarButton的基础逻辑，只需要把options改成函数形式，就能轻松拿到当前Tab.Screen的navigation对象，同时完整保留tabBarButton的原有props。

修改后的代码实现 #

<Tab.Screen
  key={index}
  name={item.route}
  component={item.component}
  options={({ navigation }) => ({
    headerShown: false,
    tabBarButton: (props) => (
      // 把navigation、原有props和自定义item一起传给TabButton
      <TabButton {...props} item={item} navigation={navigation} />
    )
  })}
/>

为什么这么改？ #

React Navigation 6中，options支持以函数形式定义，它会自动接收一个包含navigation、route的参数对象。通过这种方式，我们就能获取到当前Tab.Screen对应的navigation实例，再把它传递给自定义的TabButton组件。

在TabButton组件中使用navigation #

在你的自定义TabButton里，就可以直接解构使用navigation对象了，同时别忘了保留原有props（比如onPress、onLongPress这些是React Navigation维护标签选中状态必需的属性，绝对不能省略）：

import { TouchableOpacity, Text } from 'react-native';

const TabButton = ({ onPress, onLongPress, accessibilityLabel, item, navigation }) => {
  // 这里可以自由使用navigation的方法，比如跳转到指定路由、修改页面参数等
  const handleCustomTap = () => {
    // 比如在默认跳转逻辑外添加自定义行为
    console.log(`准备跳转到${item.route}`);
  };

  return (
    <TouchableOpacity
      onPress={() => {
        handleCustomTap();
        onPress(); // 必须保留原有onPress，确保Tab的选中状态正常更新
      }}
      onLongPress={onLongPress}
      accessibilityLabel={accessibilityLabel}
      style={/* 你的自定义样式 */}
    >
      <Text>{item.label}</Text>
      {/* 可以添加自定义图标、未读徽章等内容 */}
    </TouchableOpacity>
  );
};

关键注意点 #

• 必须传递...props给TabButton，否则React Navigation无法处理标签的选中状态、无障碍支持等核心功能。
• 如果需要在TabButton里补充自定义点击逻辑，建议在原有onPress的基础上扩展，不要直接替换掉onPress，避免破坏Tab的默认交互行为。

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