React Native中如何在createBottomTabNavigator的头部与底部标签栏上覆盖视图？

当然可以实现，你当前的问题是页面内的绝对定位视图会被TabNavigator的头部/底部标签栏遮挡——因为导航栏的层级（z-index）默认高于屏幕内部的视图。以下是几种可行的解决方案：

方案一：将遮罩放在NavigationContainer外层（推荐） #

把遮罩视图和NavigationContainer放在同一个父容器中，通过状态控制显示，设置足够高的z-index确保覆盖导航栏：

import { View, StyleSheet, Button } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { useState } from 'react';

// 示例页面组件
function HomeScreen() {
  const [showOverlay, setShowOverlay] = useState(false);
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="打开全屏遮罩" onPress={() => setShowOverlay(true)} />
      {/* 遮罩放在外层，和NavigationContainer同级 */}
      {showOverlay && (
        <View style={styles.overlay}>
          <Button title="关闭遮罩" onPress={() => setShowOverlay(false)} />
        </View>
      )}
    </View>
  );
}

function SettingsScreen() {
  const [showOverlay, setShowOverlay] = useState(false);
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="打开全屏遮罩" onPress={() => setShowOverlay(true)} />
      {showOverlay && (
        <View style={styles.overlay}>
          <Button title="关闭遮罩" onPress={() => setShowOverlay(false)} />
        </View>
      )}
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Settings" component={SettingsScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </View>
  );
}

const styles = StyleSheet.create({
  overlay: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(255, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1000, // 层级高于导航栏即可
  },
});

方案二：使用Modal组件（更简单） #

React Native的Modal组件默认会覆盖所有界面内容，包括导航栏，无需手动处理z-index：

import { View, StyleSheet, Button, Modal } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { useState } from 'react';

function HomeScreen() {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="打开遮罩" onPress={() => setModalVisible(true)} />
      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.overlay}>
          <Button title="关闭遮罩" onPress={() => setModalVisible(false)} />
        </View>
      </Modal>
    </View>
  );
}

// 其余Tab导航代码省略...

为什么你的原代码不生效？ #

你之前写的遮罩是放在单个屏幕组件内部的，而createBottomTabNavigator的底部标签栏和头部属于导航容器的层级，默认z-index高于屏幕内部的视图，所以遮罩会被导航栏挡住。

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