React Native：实现BottomTabNavigator的Bottom Sheet导航跳转功能

实现步骤 #

1. 让弹窗获取导航实例 #

弹窗内选项要跳转页面，核心是拿到导航器的navigate方法。如果弹窗是TabNavigator页面的子组件，直接用组件自带的navigation props；如果是全局组件，用useNavigation钩子：

import { useNavigation } from '@react-navigation/native';

// 底部弹窗组件
const MoreOptionsSheet = () => {
  const navigation = useNavigation();

  // 统一处理跳转逻辑
  const goToScreen = (screenName) => {
    navigation.navigate(screenName);
    // 这里调用你的BottomSheet关闭方法，比如setIsSheetOpen(false)
  };

  return (
    <View style={{ padding: 16 }}>
      <TouchableOpacity 
        style={{ paddingVertical: 12 }}
        onPress={() => goToScreen('Settings')}
      >
        <Text>设置</Text>
      </TouchableOpacity>
      <TouchableOpacity 
        style={{ paddingVertical: 12 }}
        onPress={() => goToScreen('Profile')}
      >
        <Text>个人中心</Text>
      </TouchableOpacity>
      {/* 其他需要的选项 */}
    </View>
  );
};

2. 配置「显示更多」标签 #

设置TabNavigator的最后一个标签，点击只打开弹窗，不触发默认页面跳转：

<Tab.Screen
  name="MorePlaceholder"
  component={() => null} // 不需要实际页面组件
  options={{
    tabBarLabel: '显示更多',
    tabBarButton: (props) => (
      <TouchableOpacity
        {...props}
        onPress={() => {
          // 打开BottomSheet，比如setIsSheetOpen(true)
        }}
      />
    ),
  }}
/>

3. 关键注意点 #

• 跳转前先关闭弹窗，避免动画和导航切换冲突
• 确保要跳转的页面已经在导航器中注册（不管是Tab栈还是嵌套的Stack栈）

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