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 相关文章推荐
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
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 模板高级篇总结
2006/12/21 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
python实现图书借阅系统
2019/02/20 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
python语言的优势是什么
2020/06/17 Python
python绘制高斯曲线
2021/02/19 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
仓库组长岗位职责
2014/01/29 职场文书
简历的自我评价范文
2014/02/04 职场文书
党员目标管理责任书
2014/07/25 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
三峡人家导游词
2015/01/31 职场文书
投诉信范文
2015/07/02 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书