React Native底部标签导航如何固定到底部并解决系统底栏遮挡问题

首先确认前提：你的App最外层已经包裹了react-native-safe-area-context提供的SafeAreaProvider组件，否则所有安全区相关的配置都不会生效，根组件示例如下：

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

export default function App() {
  return (
    <SafeAreaProvider>
      {/* 你的原有导航/页面根组件 */}
    </SafeAreaProvider>
  )
}

1. 基础版官方底部标签导航修复 #

直接在你的HomeTab组件中引入安全区钩子，给标签栏添加底部内边距即可，修改后代码如下：

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const Tab = createBottomTabNavigator()

const HomeTab = () => {
  // 获取各方向安全区高度
  const insets = useSafeAreaInsets()
  return (
    <Tab.Navigator
      screenOptions={({ route, navigation }) => ({
        // ... 原有其他配置保持不变
        tabBarStyle: [
          {
            display: 'flex',
            // 新增底部内边距，避开底部黑条
            paddingBottom: insets.bottom,
            // 可根据需求调整标签栏总高度
            height: 50 + insets.bottom
          },
          null,
        ],
        // ... 原有其他配置保持不变
      })}
    >
      {/* 原有Tab.Screen配置不变 */}
    </Tab.Navigator>
  )
}

2. 自定义底部标签导航修复 #

你需要先调整自定义导航的结构，把标签栏放到内容区下方，再添加底部安全区内边距，修改后代码如下：

import * as React from 'react'
import { Text, Pressable, View, StyleSheet } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import {
  useNavigationBuilder,
  TabRouter,
  TabActions,
  createNavigatorFactory,
} from '@react-navigation/native'

const TabNavigator = ({
  initialRouteName,
  children,
  screenOptions,
  tabBarStyle,
  contentStyle,
}) => {
  const { state, navigation, descriptors, NavigationContent } =
    useNavigationBuilder(TabRouter, {
      children,
      screenOptions,
      initialRouteName,
    })
  // 获取底部安全区高度
  const insets = useSafeAreaInsets()

  return (
    <NavigationContent style={{flex: 1}}>
      {/* 内容区移到上方 */}
      <View style={[{ flex: 1 }, contentStyle]}>
        {state.routes.map((route, i) => {
          return (
            <View
              key={route.key}
              style={[
                StyleSheet.absoluteFill,
                { display: i === state.index ? 'flex' : 'none' },
              ]}
            >
              {descriptors[route.key].render()}
            </View>
          )
        })}
      </View>
      {/* 标签栏移到下方，添加底部内边距 */}
      <View style={[
        { flexDirection: 'row', paddingBottom: insets.bottom, backgroundColor: '#fff' }, 
        tabBarStyle
      ]}>
        {state.routes.map((route) => (
          <Pressable
            key={route.key}
            onPress={() => {
              const event = navigation.emit({
                type: 'tabPress',
                target: route.key,
                canPreventDefault: true,
              })

              if (!event.defaultPrevented) {
                navigation.dispatch({
                  ...TabActions.jumpTo(route.name),
                  target: state.key,
                })
              }
            }}
            style={{ flex: 1, paddingVertical: 12 }}
          >
            <Text>{descriptors[route.key].options.title || route.name}</Text>
          </Pressable>
        ))}
      </View>
    </NavigationContent>
  )
}

export const CustomBottomTabNavigator = createNavigatorFactory(TabNavigator)

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