代码之家 › 专栏 › 技术社区 › Subhendu Kundu

如何在react导航的TabNavigator中添加蛀虫指示器?

expo react-navigation react-native reactjs

0

Subhendu Kundu · 技术社区 · 7 年前

我正在尝试让边框底部的活动状态指示器,就像我在添加的图像。我试着用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'
    }
  },
});

0 回复 | 直到 7 年前