如何在TabNavigator上使用tabBarComponent？选项卡栏未显示

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

// 自定义选项卡栏组件
const CustomTabBar = ({ navigation }) => {
  const { routes, index } = navigation.state;
  return (
    <View style={{ flexDirection: 'row', height: 50, backgroundColor: 'lightgray' }}>
      {routes.map((route, idx) => {
        const isActive = index === idx;
        return (
          <Text
            key={route.key}
            onPress={() => navigation.navigate(route.routeName)}
            style={{ flex: 1, textAlign: 'center', paddingVertical: 10, fontWeight: isActive ? 'bold' : 'normal' }}
          >
            {route.routeName}
          </Text>
        );
      })}
    </View>
  );
};

// 创建TabNavigator
const TabNavigator = createBottomTabNavigator(
  {
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
    Settings: { screen: SettingsScreen },
  },
  {
    tabBarComponent: CustomTabBar, // 使用自定义的选项卡栏组件
  }
);

// 创建App容器
const AppContainer = createAppContainer(TabNavigator);

export default AppContainer;