topTabBarWrapper里面这个下划线如果设置宽度无法居中显示

Question

topTabBarWrapper里面这个下划线如果设置宽度无法居中显示，有没有什么思路可以提供呢

Answer 1

今朝 2021-03-03 13:51:47

TabBarIndicator.tsx前面的导入要修改一下。

• 提问者 dds813 #1

  非常感谢！

Answer 2

今朝 2021-03-03 13:45:44

TopTabBarWrapper组件是可以自定义Indicator组件的。

TabBarIndicator.tsx组件来源：

https://github.com/satya164/react-native-tab-view/blob/main/src/TabBarIndicator.tsx

简单的修改一下，允许插入子组件。

这样就可以了。

Answer 3

今朝 2021-03-03 09:27:56

borderColor设置为transparent，在iOS上无效，而且如果不设置borderRadius，在Android端也无效。不知道是不是bug。

你是想做到 indicator跟随标签的宽度而变换对吧。

我晚上再看一下。

Answer 4

提问者 dds813 2021-03-02 18:21:14

具体要怎样设置呢

• 今朝 #1

  刚刚试了一下。
  tabStyle: {
              width: 80,
              padding: 0,
            },
  indicatorStyle: {
              height: 4,
              borderRadius: 2,
              borderLeftWidth: 30,
              borderRightWidth: 30,
              borderColor: 'transparent',
              backgroundColor: '#f86442',
            }
  
  这样也是可以达到缩减宽度，而居中的。但是有一个问题就是圆角失效了。
  
  所以我的demo中还是使用marginLeft进行偏移做的。
  tabStyle: {
              width: 80,
              padding: 0,
            },
  indicatorStyle: {
              height: 4,
              width: 20,
              marginLeft: 30,
              borderRadius: 2,
              backgroundColor: '#f86442',
            }
  
  慕课网回复的编辑器好像坏了，无法排版。见谅！

• 提问者 dds813 回复 今朝 #2

  我的tabStyle里面的宽度设置为auto了，就是为了不让这里有折行的现象，当这个时候我其实是不知道这个宽度应该是多少，比如它是两个字或者5个字的时候宽度是不一样的，使用上面两个方法都没有实现当宽度等于80 的时候下滑先为20宽，且居中的效果

Answer 5

提问者 dds813 2021-03-02 17:25:13

那样不就没有下划线了吗

• 今朝 #1

  我视频中好像有讲解这个知识点的，边框设置为透明，会挤占内部content的宽度的，看起来就是宽度变窄了。

Answer 6

今朝 2021-03-02 16:57:15

不要设置宽度，设置border，border的颜色设置为透明