react-native动态切换tab组件的方法

在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换.

这些组件分成下面两种.


第一种非常简单,同时大多数第三方组件都能达到效果.这里重点讲述第二种,我们要让第二种组件不仅能左右滑动,同时还能够在点击的时候自动滑动,将点击的位置滑动到正中间.

准备

我们先来分析一波.一个滑动组件在APP上是一种什么状态.

这里可以看出,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地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • react-native-tab-navigator组件的基本使用示例代码

    要做的效果很简单,如下图所示: 使用基本教程 1.引入组件 import TabNavigator from 'react-native-tab-navigator'; Github上的地址 2.render方法中返回: render() { return ( <View style={styles.container} > <TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === '电影'}

  • react-native动态切换tab组件的方法

    在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换. 这些组件分成下面两种. 第一种非常简单,同时大多数第三方组件都能达到效果.这里重点讲述第二种,我们要让第二种组件不仅能左右滑动,同时还能够在点击的时候自动滑动,将点击的位置滑动到正中间. 准备 我们先来分析一波.一个滑动组件在APP上是一种什么状态. 这里可以看出,tab组件需要考虑到长度超过APP的屏幕,并且在超过之后能够滑动. 同时计算出当前位置需要滑动多少距离才能够将位置居中. 需要滑动的位置=点击位置的左边距-

  • React router动态加载组件之适配器模式的应用详解

    前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data'; function App(){ return ( <Router> <Switch> <Route exact path="/" render={() => (<Redirect to="/center" />)}

  • React Native可定制底板组件Magic Sheet使用示例

    目录 正文 如何使用它 1.安装并导入 2.基本使用方法 预览 正文 一个React Native组件,通过提供一个强制性的API,可以从应用程序的任何地方(甚至在组件之外)调用,以显示一个完全可定制的底部表单,并能够等待它解决并得到一个响应. 这个库依赖于Gorhom的/bottom-sheet 的模态组件,并接受相同的道具和儿童. 如何使用它 1.安装并导入 # Yarn $ yarn add react-native-magic-sheet # NPM $ npm i react-nati

  • Angular 4根据组件名称动态创建出组件的方法教程

    一.理解angular组件 组件是一种特殊的指令,使用更简单的配置项来构建基于组件的应用程序架构,这样他能简单地写app,通过类似的web Component 或者angular2的样式.web Component 是一个规范.马上就要成为标准. 应用组件的优点: 比普通指令配置还简单 提供更好的默认设置和最好的实践 对基于组建的应用架构更优化. 对angular2的升级更平滑. 不用组建的情况: 对那些在 compile或者pre-link阶段要执行操作的指令,组件不能用,因为无法到达那个阶段

  • vue 点击按钮实现动态挂载子组件的方法

    Vue.extend( options ) 参数: {Object} options 用法: 使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数 示例:子组件 byMount.vue <template> <div> <div>mount content test!!</div> </div> </template&

  • thinkphp3.2.3框架动态切换多数据库的方法分析

    本文实例讲述了thinkphp3.2.3框架动态切换多数据库的方法.分享给大家供大家参考,具体如下: 版本说明: thinkphp3.2.3 新增自定义行为类 文件位置:Application/Common/Behaviors/SwitchDbBehavior.class.php 文件内容: namespace Common\Behaviors; class SwitchDbBehavior { //私有库id,如何连接公有库则设置为share字符串 private $_privateId =

  • 使用React代码动态生成栅格布局的方法

    作为 TerminalMACS 的一个子进程模块 - React Web管理端,使用Ant Design Pro作为框架. 本文应用到的知识1.样式文件less中方法的使用2.for循环创建按钮和栅格布局(flex布局) 1. 最终效果及源码链接 作为前端新手的我,做下面这个简单功能花了好几天时间,问了不少前端大佬(大佬们应该要不到半个小时,惭愧惭愧),现在回想问的问题都很基础(有点丢人,哈哈),多谢了哦. 先看看效果 点击浏览源码:开源项目对应源码 2. 代码简单讲解 2.1 TypeScri

  • React封装弹出框组件的方法

    本文实例为大家分享了React封装弹出框组件的方法,供大家参考,具体内容如下 效果图 文件目录 alertList.tsx 用于容纳弹出框的容器 import React from "react"; export const HAlertList = () => {     return (         <div             id="alert-list"             style={{                 posi

  • 新建的React Native就遇到vscode报警解除方法

    目录 新建的RN项目有警告 直接删除vscode报警的部分 禁掉vscode内置的TypeScript插件 引入Flow Language Support解除报警 新建的RN项目有警告 我相信AwesomeProject是很多人的第一个RN项目,包括我在内. npx react-native init AwesomeProject 但是当利用RN的脚手架搭建起来后,在vscode里打开项目,直接就会遇到如下这个vscode的警告: 'import type' declarations can o

  • React Native与Android 原生通信的方法

    我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互,这篇文章就是分享原生模块与JS传递数据的几种方式. 总的步骤可以分为如下几点: 在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法. 定义Package类,继承ReactPackage,将Module实例添加到集合. 在android继承的ReactApplication,回调实现getPackages方法,将Package实

随机推荐