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全部源代码
May 04 Javascript
img的onload的另类用法
Jan 10 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
javascript常用对话框小集
Sep 13 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
node.js文件操作系统实例详解
Nov 05 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+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
php 远程图片保存到本地的函数类
2008/12/08 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
jquery图片切换插件
2015/03/16 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
python 多线程重启方法
2019/02/18 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
shallow copy和deep copy的区别
2016/05/09 面试题
三年大学生活自我鉴定
2014/01/21 职场文书
开工典礼策划方案
2014/05/23 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
六查六看剖析材料
2014/10/06 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏