React Native Tab Navigator自定义样式不生效，求可行的样式配置方法

你当前配置的样式不生效，是因为属性名使用错误：@react-navigation/bottom-tabs 中导航栏的样式配置字段为 tabBarStyle，而非直接写在 screenOptions 根级的 style 属性中。

方案1：修复现有配置（快速生效） #

将你代码中 screenOptions 下的 style 字段替换为 tabBarStyle 即可生效，可额外添加背景色、阴影等属性丰富样式，示例修改如下：

screenOptions={({ route }) => ({
  tabBarShowLabel: false,
  tabBarHideOnKeyboard: true,
  // 替换原来的style为tabBarStyle
  tabBarStyle: {
    borderRadius: 15,
    height: 90,
    // 需添加背景色才能看到圆角效果，默认背景为透明
    backgroundColor: '#fff',
    // 可按需添加阴影、边距等样式
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    // 适配安卓阴影
    elevation: 10,
  },
  tabBarIcon: ({ focused, color, size }) => {
    // 原有图标逻辑保持不变
    let iconName;
    switch (route.name) {
      case 'Home':
        iconName = 'home';
        break;
      case 'Messages':
        iconName = 'message-circle';
        break;
      case 'Create':
        iconName = 'home';
        break;
      case 'Forum':
        iconName = 'activity';
        break;
      case 'Profile':
        iconName = 'user';
        break;
      default:
        break;
    }
    return <Icon name={iconName} color={color} size={24} />;
  },
})}

方案2：完全自定义TabBar组件（高度定制） #

如果内置属性无法满足你的样式需求，可以自定义完整的TabBar组件，通过tabBar属性传入导航器，实现100%样式自定义：

1. 首先编写自定义TabBar组件：

import { View, TouchableOpacity, StyleSheet } from 'react-native';

const CustomTabBar = ({ state, descriptors, navigation }) => {
  return (
    <View style={styles.tabBarContainer}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        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, route.params);
          }
        };

        return (
          <TouchableOpacity
            key={route.key}
            onPress={onPress}
            style={styles.tabItem}
          >
            {options.tabBarIcon({ 
              focused: isFocused, 
              color: isFocused ? '#2563eb' : '#9ca3af', 
              size: 24 
            })}
          </TouchableOpacity>
        );
      })}
    </View>
  )
}

const styles = StyleSheet.create({
  tabBarContainer: {
    flexDirection: 'row',
    height: 90,
    borderRadius: 15,
    backgroundColor: '#fff',
    paddingBottom: 10,
    paddingTop: 10,
  },
  tabItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
})

2. 将自定义组件传入导航器：

<Tabs.Navigator
  tabBar={(props) => <CustomTabBar {...props} />}
  screenOptions={/* 原有配置保持不变 */}
>
  {/* 原有Tabs.Screen配置不变 */}
</Tabs.Navigator>

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