React Native + Expo Tabs底部弹窗被Tab Bar遮挡问题求助

核心原因 #

Expo Router的Tab Bar默认挂载在路由组件的上层层级，若你的Bottom Sheet是在页面组件内部渲染，其层级会低于Tab Bar，导致被遮挡。调整局部的zIndex或elevation往往因组件嵌套层级限制而无效。

可靠解决方案：将Bottom Sheet挂载到根路由层级 #

把Bottom Sheet放在全局根组件（_app.tsx）中，通过Context控制显示/隐藏，确保其层级高于Tab Bar。

1. 创建Bottom Sheet状态管理Context

import { createContext, useContext, useState, ReactNode } from 'react';

type BottomSheetContextType = {
  isOpen: boolean;
  openBottomSheet: () => void;
  closeBottomSheet: () => void;
};

const BottomSheetContext = createContext<BottomSheetContextType | undefined>(undefined);

export const BottomSheetProvider = ({ children }: { children: ReactNode }) => {
  const [isOpen, setIsOpen] = useState(false);

  const openBottomSheet = () => setIsOpen(true);
  const closeBottomSheet = () => setIsOpen(false);

  return (
    <BottomSheetContext.Provider value={{ isOpen, openBottomSheet, closeBottomSheet }}>
      {children}
      {/* 渲染你的自定义Bottom Sheet */}
      <YourCustomBottomSheet isOpen={isOpen} onClose={closeBottomSheet} />
    </BottomSheetContext.Provider>
  );
};

export const useBottomSheet = () => {
  const context = useContext(BottomSheetContext);
  if (!context) {
    throw new Error('useBottomSheet必须在BottomSheetProvider内部使用');
  }
  return context;
};

2. 在根路由_app.tsx中挂载Provider

import { Slot } from 'expo-router';
import { BottomSheetProvider } from './contexts/BottomSheetContext';

export default function App() {
  return (
    <BottomSheetProvider>
      <Slot />
    </BottomSheetProvider>
  );
}

3. 在任意页面中调用Bottom Sheet

import { useBottomSheet } from '../contexts/BottomSheetContext';
import { Button } from 'react-native';

export default function HomeScreen() {
  const { openBottomSheet } = useBottomSheet();

  return <Button title="打开底部弹窗" onPress={openBottomSheet} />;
}

备选方案：调整Tab Bar与Bottom Sheet的层级 #

若不想修改全局结构，可尝试降低Tab Bar的层级，同时提升Bottom Sheet的层级：

1. 自定义Tab Bar并降低其zIndex

import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarStyle: {
          zIndex: 1,
          elevation: 1, // Android专属层级属性
        },
      }}
    >
      {/* 你的Tab页面配置 */}
    </Tabs>
  );
}

2. 给Bottom Sheet设置更高层级

import { View } from 'react-native';

const YourCustomBottomSheet = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <View
      style={{
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 100, // 确保高于Tab Bar的zIndex
        elevation: 100, // Android对应层级
        backgroundColor: '#fff',
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16,
        padding: 20,
      }}
    >
      {/* Bottom Sheet内容 */}
      <Button title="关闭" onPress={onClose} />
    </View>
  );
};

注意：该方案可能因Expo Router内部样式优先级问题失效，优先推荐全局挂载的方案。

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