在 App 中免不了要使用 tab 组件, 有的是 tab 切换, 也有的是 tab 分类切换. 这篇文章主要介绍了 react-native 动态切换 tab 组件的方法, 非常具有实用价值, 需要的朋友可以参考下
在 App 中免不了要使用 tab 组件, 有的是 tab 切换, 也有的是 tab 分类切换.
这些组件分成下面两种.
第一种非常简单, 同时大多数第三方组件都能达到效果. 这里重点讲述第二种, 我们要让第二种组件不仅能左右滑动, 同时还能够在点击的时候自动滑动, 将点击的位置滑动到正中间.
准备
我们先来分析一波. 一个滑动组件在 App 上是一种什么状态.
这里可以看出, tab 组件需要考虑到长度超过 App 的屏幕, 并且在超过之后能够滑动.
同时计算出当前位置需要滑动多少距离才能够将位置居中.
需要滑动的位置 = 点击位置的左边距 - App 屏幕 / 2 + 点击位置的宽度 / 2
这个公式也就是我们自动滑动的核心了.
开发
使用 ScrollView 组件承载 tab 项, 这样就可以非常简单的达到滑动的效果. 同时添加 horizontal,directionalLockEnabled,showsHorizontalScrollIndicator,snapToAlignment 几个属性.
- <ScrollView ref={e => this.scroll = e}
- horizontal directionalLockEnabled
- showsHorizontalScrollIndicator={false}
- snapToAlignment="center">
- {this.props.data.map((item, index) =>
- {/* 具体项 */}
- )}// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- </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;
- // 公式
- // 欢迎加入全栈开发交流圈一起学习交流: 864305860
- 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);
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/916e8a9adfaa9b572f0cb437d31a7c86.html