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 高度集成 很多自己想实现的功能 很不好弄 如果是通过 ...
随机推荐
- 树莓派 Linux备忘
//更新树莓派 sudo apt-mark hold raspberrypi-bootloader sudo apt-get update sudo apt-get upgrade //配置 rasp ...
- 有了大量微信用户,就不需要App了吗?
小卢同学是我半年前在中关村车库咖啡认识的一个自由创业者,他从北航毕业后在一家IT上市公司只上了1年多的班就辞职创业了,他的创业项目属于国内度假旅游垂直细分领域:积累大量详细的旅游攻略,组成一个个温馨舒 ...
- 实现一个基于 SharePoint 2013 的 Timecard 应用(上)
在 SharePoint 2013 上面实现一个 Timecard 应用的想法来自一个真实的需求,而实现的方案在我脑海里面盘旋已经很久了,终于这几天准备安排点儿时间将它实现出来. “ We start ...
- Normalize.css的使用及下载
Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备 ...
- JS框架
s框架就是将常用的方法进行封装,方便调取使用.一个框架是一个可复用的设计构件,它规定了应用的体系结构,阐明了整个设计.协作构件之间的依赖关系.责任分配和控制流程,表现为一组抽象类以及其实例之间协作的方 ...
- JS原型链
JS作为发展了多年了对象语言,支持继承,和完全面向对象语言不同的是,JS依赖原型链来实现对象的继承. 首先JS的对象分两大类,函数对象和普通对象,每个对象均内置__proto__属性,在不人为赋值__ ...
- 【linux】free命令中cached和buffers的区别
一.命令 [root@localhost ~]# free -m total used free shared buffers cached Mem: 7869 7651 218 1 191 5081 ...
- HTML5全屏(Fullscreen)API详细介绍
// 整个页面 onclick= launchFullScreen(document.documentElement); // 某个元素 launchFullScreen(document.get ...
- 数据库Sharding系列文章
关于数据库Sharding的策略,有人整理出相关的方案,看完收获很大. 数据库分库分表(sharding)系列(五) 一种支持自由规划无须数据迁移和修改路由代码的Sharding扩容方案 数据库分库分 ...
- 网络IO之阻塞、非阻塞、同步、异步总结
网络IO之阻塞.非阻塞.同步.异步总结 1.前言 在网络编程中,阻塞.非阻塞.同步.异步经常被提到.unix网络编程第一卷第六章专门讨论五种不同的IO模型,Stevens讲的非常详细,我记得去年看第一 ...