如何移除React Native底部导航栏背景？适配Android 11与14

针对你在Android 11.0和Android 14.0设备上遇到的问题（透明模式下Snackbar被导航栏遮挡），可以通过以下步骤实现完全隐藏底部导航栏背景，同时保证交互元素正常显示：

一、处理Android系统底部导航栏 #

1. Android 11.0（API 30）及以下配置 #

打开android/app/src/main/res/values/styles.xml，修改AppTheme样式：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 设置导航栏为全透明 -->
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <!-- 关闭导航栏半透明效果，避免内容延伸至导航栏下方 -->
    <item name="android:windowTranslucentNavigation">false</item>
    <!-- 确保系统绘制状态栏/导航栏背景 -->
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

2. Android 14.0（API 34）配置 #

新建或打开android/app/src/main/res/values-v34/styles.xml，添加适配规则：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <!-- 关闭导航栏强制对比度，避免自动添加背景 -->
    <item name="android:navigationBarContrastEnforced">false</item>
    <!-- 设置导航栏为滑动显示模式，平时隐藏，滑动唤起 -->
    <item name="android:windowInsetsControllerNavigationBarsBehavior">
        android:windowInsetsControllerBehaviorShowTransientBarsBySwipe
    </item>
</style>

二、保证交互元素正常显示 #

使用react-native-safe-area-context库确保页面内容（包括Snackbar）显示在安全区域内：

1. 安装依赖：

npm install react-native-safe-area-context

2. 在入口文件中用SafeAreaProvider和SafeAreaView包裹内容：

import { SafeAreaView, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        {/* 你的应用页面内容 */}
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

三、如果是自定义底部导航组件（非系统导航栏） #

若你使用的是React Navigation等库的自定义底部导航，直接设置导航栏背景透明并固定位置：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarStyle: {
          backgroundColor: 'transparent',
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          borderTopWidth: 0, // 移除顶部边框
        },
      }}
    >
      {/* 你的Tab页面配置 */}
    </Tab.Navigator>
  );
}

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