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

来源:11-4 频道信息组件(下)

dds813

2021-03-02

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

写回答

6回答

今朝

2021-03-03

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

//img1.sycdn.imooc.com/szimg/603f23c40953d37b13600436.jpg

0
1
dds813
非常感谢!
2021-03-14
共1条回复

今朝

2021-03-03

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

//img1.sycdn.imooc.com/szimg/603f21b009aedc2c22501120.jpg

//img.mukewang.com/szimg/603f21e40928057010660848.jpg

TabBarIndicator.tsx组件来源:

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


//img.mukewang.com/szimg/603f22500944200f09480598.jpg

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


这样就可以了。

0
0

今朝

2021-03-03

//img1.sycdn.imooc.com/szimg/603ee5bc090ee0de16980670.jpg

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

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

我晚上再看一下。


0
0

dds813

提问者

2021-03-02

//img.mukewang.com/szimg/603e118609c74bec07670473.jpg

具体要怎样设置呢

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

dds813

提问者

2021-03-02

那样不就没有下划线了吗

0
1
今朝
我视频中好像有讲解这个知识点的,边框设置为透明,会挤占内部content的宽度的,看起来就是宽度变窄了。
2021-03-02
共1条回复

今朝

2021-03-02

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

0
0

跨平台应用ReactNative+TypeScript仿喜马拉雅开发App

从入门到实战,掌握用TypeScript开发ReactNative应用

832 学习 · 339 问题

查看课程