如何在react导航中自定义tabBarComponent样式

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';

// 自定义Tab栏组件
const CustomTabBarComponent = ({ navigation }) => {
  const { routes, index } = navigation.state;

  return (
    <View style={styles.tabBar}>
      {routes.map((route, idx) => {
        const isFocused = index === idx;

        return (
          <Text
            key={route.key}
            style={[styles.tabItem, isFocused && styles.tabItemFocused]}
            onPress={() => navigation.navigate(route.routeName)}
          >
            {route.routeName}
          </Text>
        );
      })}
    </View>
  );
};

// 创建Tab导航器
const TabNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen,
    Settings: SettingsScreen,
  },
  {
    tabBarComponent: CustomTabBarComponent, // 使用自定义Tab栏组件
  }
);

const styles = StyleSheet.create({
  tabBar: {
    flexDirection: 'row',
    height: 50,
    backgroundColor: '#f2f2f2',
    borderTopWidth: 1,
    borderTopColor: '#ccc',
  },
  tabItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 10,
  },
  tabItemFocused: {
    color: 'blue',
    fontWeight: 'bold',
  },
});

export default TabNavigator;