如何在React Navigation的TabNavigator中添加钻孔指示器？

Question

我正在尝试使边框底部指示器处于活动状态，就像我在添加的图像中显示的那样。我尝试使用activeTabStyle添加边框，但无法正常工作。

activeTabStyle: {
 backgroundColor: 'white',
 borderBottomWidth: 4,
 borderColor: '#6C1D7C'
}

我该如何解决？

const DashboardTabNav = createBottomTabNavigator({
  User: HomeScreen,
  Home: HomeScreen,
  History: SettingsScreen,
  Cart: SettingsScreen
},
{
  defaultNavigationOptions: customTabs,
  animationEnabled: true,
  swipeEnabled: true,
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: '#6C1D7C',
    inactiveTintColor: '#000000',
    style:{
      shadowColor: 'rgba(58,55,55,0.1)',
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 1,
      shadowRadius: 15,
      elevation: 3,
      borderTopColor: 'transparent',
      backgroundColor:'#fff',
      borderTopLeftRadius: 20,
      borderTopRightRadius: 20
    },
    activeTabStyle: {
      backgroundColor: 'white',
      borderBottomWidth: 4,
      borderColor: '#6C1D7C'
    }
  },
});