如何使下划线标签在中心位置？

Question

我想自定义位于中心的标签下划线。 the result 我已经使用alignItem，justifyContent及其无法正常工作。谢谢

*这是我的代码

<Footer>
<Tabs tabBarUnderlineStyle={{ backgroundColor: '#00CBFF', width: 100}}>
<Tab1>
<Tab2>
</Tabs>
</Footer>

Answer 1

如果下划线是要应用样式的内容，则需要使用alignSelf。

alignItem和justifyContent影响所有子组件，而不影响组件本身。

Answer 2

您可以将以下属性设置为父视图。

flexDirection: 'row',
justifyContent: 'space-evenly',

这将为您的布局在两个标签上设置相同的空间，并且将设置在中间。

Answer 3

像这样使用marginHorizo​​ntal：

<Tabs
      tabContainerStyle={styles.topTabBG}
      tabBarBackgroundColor="#f0f0f0"
      tabBarUnderlineStyle={{
        width: 50,
        height: 3,
        marginHorizontal: Dimensions.get('window').width / 9.5,
        backgroundColor: '#5e7584',
      }}>