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 相关文章推荐
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
再探JavaScript作用域
Sep 24 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
js时间控件只显示年月
2017/01/08 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
sqlalchemy对象转dict的示例
2014/04/22 Python
简单介绍Python中的JSON模块
2015/04/08 Python
python相似模块用例
2016/03/04 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
python实现经典排序算法的示例代码
2021/02/07 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
《争吵》教学反思
2014/02/15 职场文书
论文诚信承诺书
2014/05/23 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
六一儿童节开幕词
2015/01/29 职场文书
上班迟到检讨书
2015/05/06 职场文书
入团介绍人意见范文
2015/06/04 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers