ReactNative 根据scrollView/listview滑动距离动态修改NavBar颜色
我们常见某些APP上滑的时候,NavBar颜色会从透明渐变为某种颜色
原理非常简单,根据scrollView的回调动态修改NavBar的透明度即可。
在RN中,尤其是ListView中这个回调不是很好找,故贴一下方便别人找到。
1.scrollView
<ScrollView onScroll={(event)=>{this.setState({scrollOffset:event.nativeEvent.contentOffset.y});}} scrollEventThrottle={15}/>
scrollView有一个onScroll的函数,会回调event,其中event中包含了滑动的距离,我们设置在state的参数名为 scrollOffset
上滑时该值为负,下滑时为正。
所以我们只要对于Navbar设定透明度为:
var opacity; var maxDistance = 100; if(this.state.scrollOffset<=0){ opacity = 0; }else if(this.state.scrollOffset<=maxDistance){ opacity = this.state.scrollOffset/maxDistance*1; }else{ opacity = 1; }
假如下面的View是我们的NavBar,我们就可以通过设定如下的背景色的方式来实现这种效果。
<View style={{position:'absolute',width:screenWidth,height:64,top:0,zIndex:99,backgroundColor:'rgba(108,193,224,'+opacity+')'}}/>
2.listView
listView有个数据源回调,能传递当前listView的scrollView,然后定义该scrollView中onScroll函数,即可获得listView的滑动距离
<ListView ref = {"listView"} style={styles.listView} dataSource={this.state.data} renderRow={this._renderRow.bind(this) } enableEmptySections={true} removeClippedSubviews={false} renderScrollComponent ={props => <ScrollView {...props} refreshControl={this.renderRefreshView()} onScroll={(event)=>{this.setState({scrollOffset:event.nativeEvent.contentOffset.y});}} scrollEventThrottle={15}/>} > </ListView>
关于scrollEventThrottle参数:
该参数只在iOS上有效,指的是onScroll回调的频率,默认值回调1次。值越高,每秒回调次数越多,也意味着显示更精确,但更耗资源。
scrollView的官方文档页面:
http://facebook.github.io/react-native/releases/0.37/docs/scrollview.html
ReactNative 根据scrollView/listview滑动距离动态修改NavBar颜色的更多相关文章
- echarts系列之动态修改柱状图颜色
echarts根据某一变量动态修改柱状图颜色 1.option中参数配置项series { "name":"Android", "type" ...
- Android动态修改图片颜色的实现方式分析
版权声明:本文为博主原创文章,未经博主允许不得转载. 1.修改色相.饱和度.亮度 参看:http://blog.csdn.NET/sjf0115/article/details/7267063 2.使 ...
- ScrollView 与ListView 滑动冲突完美解决
一.介绍ListView高度的设置方法 二.根据实际需求解决冲突问题 一.介绍ListView高度的设置方法 在ScrollView中使用ListView,ListView的高度会不正常. 方式一:在 ...
- ScrollView和ListView滑动冲突问题
1.在ScrollView里面嵌套ListView时,ListView的滑动事件无法响应. 先看下事件分发的过程: 由父View层的 onInterceptTouchEvent 到中间层的on ...
- Android实践之ScrollView中滑动冲突处理
转载注明出处:http://blog.csdn.net/xiaohanluo/article/details/52130923 1. 前言 在Android开发中,假设是一些简单的布局.都非常easy ...
- android中随着ScrollView的滑动,titleBar状态的改变
今天项目有一个需求,,类是于QQ空间里面的一个功能,于是就研究了一下,嗯,说这么多,可能还有人不知道指的是那个,直接上效果图.见谅,不会弄动态图: 对,就是这种效果,我研究了一下,思路如下: 1. ...
- 当ViewPager嵌套在ScrollView/ListView里时,手势冲突如何处理?
有时我们需要将ViewPager嵌套在其他已经含有手势动作的ViewGroup里,如ScrollView,ListView时,会造成手势冲突,如表现为ViewPager向左划时,不小心向上移动了一点距 ...
- Scroller应用:ListView滑动删除
1.设计思路 在Scroller的应用--滑屏实现中使用Scroller实现滑屏效果,这里使用Scroller与ListView实现相似QQ滑动.然后点击删除功能.设计思路是Item使用Scrolle ...
- iOS 动态修改导航栏颜色 UINavigationBar
示例 所谓动态修改 意思是 在当前页面滚动的过程中 亦或 是在 触发返回事件\进入一个新的页面 导航栏的动态变化 由于系统级别的navBar 高度集成 很多自己想实现的功能 很不好弄 如果是通过 ...
随机推荐
- hibernate的get和load的区别
在hibernate中我们知道如果要从数据库中得到一个对象,通常有两种方式,一种是通过session.get()方法,另一种就是通过session.load()方法,然后其实这两种方法在获得一个实体对 ...
- Android教程收集贴
Loader & REST Rest Loader Tutorial [github源码] [源码演示] [github作者主页] Twitter Timeline Sample for An ...
- C# List 排序各种用法与比较
下面介绍各种List的sort的用法与比较 首先,我们建一个People的实体,有name.age.sex的属性,我们要排序的字段是年龄age 新建一个实体类 public class People ...
- [Erlang 0125] Know a little Erlang opcode
Erlang源代码编译为beam文件,代码要经过一系列的过程(见下面的简图),Core Erlang之前已经简单介绍过了Core Erlang,代码转换为Core Erlang,就容易拨开一些语法糖的 ...
- Hibernate 系列 06 - 对象在JVM中的生命周期
引导目录: Hibernate 系列教程 目录 Java对象通过new命令进行创建,Java虚拟机(Java Virtual Machine,JVM)会为新的Java对象在内存中开辟一个新空间以存放次 ...
- Python 代码风格
1 原则 在开始讨论Python社区所采用的具体标准或是由其他人推荐的建议之前,考虑一些总体原则非常重要. 请记住可读性标准的目标是提升可读性.这些规则存在的目的就是为了帮助人读写代码,而不是相反. ...
- 编译protobuf的jar文件
1.准备工作 需要到github上下载相应的文件,地址https://github.com/google/protobuf/releases protobuf有很多不同语言的版本,因为我们需要的是ja ...
- 烂泥:切割nginx日志
本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 这几天自己看了下博客的nginx日志,发现日志文件发现越来越大. 因为nginx自己不会 ...
- 深度优先搜索(DFS)
[算法入门] 郭志伟@SYSU:raphealguo(at)qq.com 2012/05/12 1.前言 深度优先搜索(缩写DFS)有点类似广度优先搜索,也是对一个连通图进行遍历的算法.它的思想是从一 ...
- C#剪切,复制,粘贴底层应用编写
zz备用复制剪切粘贴的底层应用 /// <summary> /// 复制或剪切文件至剪贴板(方法) /// </summary> /// <param name=&quo ...