React Native Bottom Tabs如何添加垂直内边距（paddingVertical）

方法1：自定义TabBar组件（精准控制，推荐） #

直接自定义TabBar可以完全掌控布局，避免默认样式的冲突：

import { View, Text, TouchableOpacity } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from '@expo/vector-icons/Ionicons'; // 按需引入图标库

const Tab = createBottomTabNavigator();

// 自定义底部标签栏组件
const CustomTabBar = ({ state, descriptors, navigation }) => {
  return (
    <View style={{ 
      flexDirection: 'row',
      backgroundColor: '#fff',
      paddingVertical: 12, // 这里设置你想要的垂直内边距
      borderTopWidth: 1,
      borderTopColor: '#eee'
    }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.tabBarLabel || options.title || route.name;
        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        return (
          <TouchableOpacity
            key={index}
            onPress={onPress}
            style={{ flex: 1, alignItems: 'center' }}
          >
            {/* 渲染图标 */}
            {options.tabBarIcon && options.tabBarIcon({ 
              focused: isFocused, 
              color: isFocused ? '#2196F3' : '#888', 
              size: 24 
            })}
            {/* 渲染标签文字 */}
            <Text style={{ 
              color: isFocused ? '#2196F3' : '#888', 
              marginTop: 4, 
              fontSize: 12 
            }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

// 使用自定义TabBar
export default function App() {
  return (
    <Tab.Navigator tabBar={props => <CustomTabBar {...props} />}>
      <Tab.Screen 
        name="首页" 
        component={HomeScreen} 
        options={{ 
          tabBarIcon: ({ focused }) => (
            <Ionicons name={focused ? 'home' : 'home-outline'} size={24} color={focused ? '#2196F3' : '#888'} />
          )
        }} 
      />
      <Tab.Screen 
        name="设置" 
        component={SettingsScreen} 
        options={{ 
          tabBarIcon: ({ focused }) => (
            <Ionicons name={focused ? 'settings' : 'settings-outline'} size={24} color={focused ? '#2196F3' : '#888'} />
          )
        }} 
      />
    </Tab.Navigator>
  );
}

方法2：调整默认TabBar样式（快速解决） #

不想自定义组件的话，可以通过tabBarStyle设置内边距，同时手动固定标签栏高度，避免被内边距撑开：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from '@expo/vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarStyle: {
          paddingVertical: 12, // 垂直内边距
          height: 70, // 固定高度，确保内边距+内容高度符合预期
          borderTopWidth: 1,
          borderTopColor: '#eee'
        },
        tabBarLabelStyle: {
          marginTop: 4, // 图标和文字的间距
          fontSize: 12
        },
        tabBarIconStyle: {
          marginBottom: 0 // 重置默认图标下边距，避免和padding冲突
        }
      }}
    >
      <Tab.Screen 
        name="首页" 
        component={HomeScreen} 
        options={{ 
          tabBarIcon: ({ focused }) => (
            <Ionicons name={focused ? 'home' : 'home-outline'} size={24} color={focused ? '#2196F3' : '#888'} />
          )
        }} 
      />
      <Tab.Screen 
        name="设置" 
        component={SettingsScreen} 
        options={{ 
          tabBarIcon: ({ focused }) => (
            <Ionicons name={focused ? 'settings' : 'settings-outline'} size={24} color={focused ? '#2196F3' : '#888'} />
          )
        }} 
      />
    </Tab.Navigator>
  );
}

问题原因说明 #

直接加paddingVertical会导致默认标签栏的高度被自动撑开，同时默认的图标、文字布局没有适配内边距，才会出现你遇到的变形问题。要么自定义组件完全控制布局，要么手动固定高度并调整子元素的样式来适配。

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