react-native-scrollable-tab-view自定义TabBar

react-native-scrollable-tab-view为我们提供了两种基本的Tab控制器样式,DefaultTabBarScrollableTabBar 。

有时候,这两种基本样式并不能满足我们的需求,那么此时就需要我们自己来实现特定的样式。就是自定义一个TabBar组件。

在这个组件里我们希望每个tab都是传进来的,而不是写死的,这样有利于复用嘛。

这个组件的render方法是这样的

261a.png

tabs是传过来的tab集合我们去遍历它,然后执行一个renderTabOption方法,这个方法里面会返回每一个tab,相应的代码如下:

216b.png

首先,判断 i 是否是当前选中的activeTar,来使用不同的颜色,然后:

TouchableOpacity:点击触发onPress方法,使用goToPage跳转到对应的tab

Icon:设置name(图标,使用tabIconNames[i]获取),size(图标大小),color(图标颜色)

最后在使用页面引用改组件并且放在ScrollableTabView里


261c.png


261d.png

主意tabLabel这个属性必须使用,且值不能重复。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容