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 调试利器 Firebug使用详解六
Jul 05 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
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抓取页面的几种方法详解
2013/06/17 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
javascript实现简单搜索功能
2020/03/26 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
Python中的zip函数使用示例
2015/01/29 Python
Python数据类型详解(一)字符串
2016/05/08 Python
Python实现KNN邻近算法
2021/01/28 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
2014新年寄语
2014/01/20 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
篮球比赛策划方案
2014/06/05 职场文书
村官个人总结范文
2015/03/03 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技