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 选项卡效果 新手代码
Jul 08 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
vue实现文件上传读取及下载功能
Nov 17 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
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
什么是命名空间(NameSpace)
2015/11/24 面试题
Java如何支持I18N?
2016/10/31 面试题
感恩老师的演讲稿
2014/05/06 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
银行催款通知书
2015/04/17 职场文书
安全承诺书格式范本
2015/04/28 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server