react-native动态切换tab组件的方法


Posted in Javascript onJuly 07, 2018

在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换.

这些组件分成下面两种.

react-native动态切换tab组件的方法
react-native动态切换tab组件的方法

第一种非常简单,同时大多数第三方组件都能达到效果.这里重点讲述第二种,我们要让第二种组件不仅能左右滑动,同时还能够在点击的时候自动滑动,将点击的位置滑动到正中间.

准备

我们先来分析一波.一个滑动组件在APP上是一种什么状态.

react-native动态切换tab组件的方法

这里可以看出,tab组件需要考虑到长度超过APP的屏幕,并且在超过之后能够滑动.

同时计算出当前位置需要滑动多少距离才能够将位置居中.
需要滑动的位置=点击位置的左边距-APP屏幕/2+点击位置的宽度/2

这个公式也就是我们自动滑动的核心了.

开发

使用ScrollView组件承载tab项,这样就可以非常简单的达到滑动的效果.同时添加horizontaldirectionalLockEnabledshowsHorizontalScrollIndicatorsnapToAlignment几个属性.

<ScrollView ref={e => this.scroll = e}
 horizontal directionalLockEnabled
 showsHorizontalScrollIndicator={false}
 snapToAlignment="center">
 {this.props.data.map((item, index) =>
  {/*具体项*/}
 )}
</ScrollView>

使用TouchableOpacity包裹内容项,同时调用setLaout方法将每个项的宽高等属性记录下来,为我们后面计算当前位置做准备.

<TouchableOpacity onPress={() => this.setIndex(index)} 
 onLayout={e => this.setLaout(e.nativeEvent.layout, index)} 
 key={item.id} 
 style={tabBarStyle.itemBtn}>
  <Text style={[tabBarStyle.item, this.state.index === index ? tabBarStyle.active : null]} > {item.name}</Text>
  <View style={[tabBarStyle.line, this.state.index === index ? tabBarStyle.active2 : null]}>    </View>
</TouchableOpacity>

记录每个项渲染之后的位置,将这些值存在变量里,为后面计算做准备.

laout_list = []
setLaout(layout, index) {
 //存单个项的位置
 this.laout_list[index] = layout;
 //计算所有项的总长度
 this.scrollW += layout.width;
}

接下来就是点击自动变换位置的计算了.

setIndex(index, bl = true) {
 //先改变点击项的颜色
 this.setState({ index })
 //兼容错误
 if (!this.scroll) return;
 //拿到当前项的位置数据
 let layout = this.laout_list[index];
 let rx = deviceWidth / 2;
 //公式
 let sx = layout.x - rx + layout.width / 2;
 //如果还不需要移动,原地待着
 if (sx < 0) sx = 0;
 //移动位置
 sx < this.scrollW - deviceWidth && this.scroll.scrollTo({ x: sx, animated: bl });
 //结尾部分直接移动到底
 sx >= this.scrollW - deviceWidth && this.scroll.scrollToEnd({ animated: bl });
 //触发一些需要的外部事件
 this.props.onChange && this.props.onChange(index);
}

gitee地址

github地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现单一html页面两套css切换代码
Apr 11 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
vue.js 实现点击展开收起动画效果
Jul 07 #Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 #Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 #Javascript
小程序实现发表评论功能
Jul 06 #Javascript
vue中倒计时组件的实例代码
Jul 06 #Javascript
微信小程序websocket实现聊天功能
Mar 30 #Javascript
vue中锚点的三种方法
Jul 06 #Javascript
You might like
php生成随机颜色的方法
2014/11/13 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
谈谈如何手动释放Python的内存
2016/12/17 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python 自定义装饰器实例详解
2019/07/20 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
车间主任岗位职责
2014/03/16 职场文书
户外宣传策划方案
2014/05/25 职场文书
服装设计专业求职信
2014/06/16 职场文书
股东授权委托书范本
2014/09/13 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
感谢信范文大全
2015/01/23 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
小学班长竞选稿
2015/11/20 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
mysql如何查询连续记录
2022/05/11 MySQL