好用的分屏tab react-native-scrollable-tab-view

我们需要导航栏

如果一个人每天都有惊喜的话,我今天的最大惊喜就是找到了一个react-native-scrollable-tab-view。 我们在写一个应用的时候,总是会有需要,将多个页面放在一屏,通过导航栏切换,如微信淘宝 这时候我们需要一个组件来帮我们快速实现这个功能。

react-native-tabbar

之前我找到的是react-native-tabbar,也是一个实现这个场景的模块。但是有一些不适合我的使用。 1、 样式有点搓 2、 只能通过点击导航栏tab直接切换 3、 分在不同屏的组件(及页面)是一起mount的,而不是切换过去后才mount

特别是因为第三点,我几乎想自己重写一个组件去处理了。

遇见 react-native-scrollable-tab-view

遇见react-native-scrollable-tab-view,是因为我在React Native 中文网 学习 动画的使用,里面介绍Rebound的时候有举例到。 于是点了进去。 react-native-scrollable-tab-view

这个组件几乎完全符合了我的预想。

  • 样式好看,且可配置
  • 导航tab位置可配
  • 页面切换有动画
  • 可通过滑动页面实现切换
  • 页面是第一次切换获取的时候mount

唯一不太喜欢的是,当 导航tab 移至底部的时候,tab的指示线 依然实在 tab下方,而不是 tab上方,为此,我还专门fork了代码,做了修改,添加了配置项,并发起了pull request。 后来才看到,这一项功能,已经有人做了修改,并提交了pull request,几乎下一个版本就可以用上了。

完美。

结尾

真的是小收获呀,写react native怎么做这样的导航栏,一直困扰了我很久,甚至失去了编写新应用的热情,很高兴遇见它

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏静默虚空的博客

详谈如何定制自己的博客园皮肤

如果你仅仅想原封不动的使用本人的定制皮肤,而不想了解实现细节。那么你只需要完成以下几个步骤即可,后面的章节可以忽略。

49600
来自专栏极客慕白的成长之路

图标字体应用实践

使用的时候,通过background-position调整显示的位置,如下图所示:

19020
来自专栏无所事事者爱嘲笑

Vue中scoped css和css module比较

48320
来自专栏数据小魔方

单元格格式/条件格式的妙用

今天跟大家分享一种常用的技巧——利用单元格格式/条件格式按颜色划分不同数据等级。 ▽▼▽ 这个技巧在绩效管理、成绩考评以及其他设计考核的工作中都会经常用到。首...

58170
来自专栏Youngxj

自适应导航网页源码

1.1K20
来自专栏葡萄城控件技术团队

如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

除了WijmoJS 的可视化在线设计器之外(在这里阅读基于Web的WijmoJS Designer),我们刚刚发布了针对Angular开发的Visual Stu...

20640
来自专栏IMWeb前端团队

BaselineJPEGvs.ProgressiveJPEG

本文作者:IMWeb helondeng 原文出处:IMWeb社区 未经同意,禁止转载 JPEG有两种存储格式:baseline 和 progress...

315100
来自专栏Youngxj

给网站添加好看的底部功能按钮

18550
来自专栏前端知识分享

第146天:移动H5前端性能优化

4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB

15940
来自专栏小白课代表

更新|PC截图工具的最佳选择。

说到截图,最常用的可能就是QQ自带的截图功能了,简单流畅能满足我们的日常需求,依附于QQ,没有特殊的需求甚至不需要其他的截图软件。

14200

扫码关注云+社区

领取腾讯云代金券