我们常见某些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颜色的更多相关文章

  1. echarts系列之动态修改柱状图颜色

    echarts根据某一变量动态修改柱状图颜色 1.option中参数配置项series { "name":"Android", "type" ...

  2. Android动态修改图片颜色的实现方式分析

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.修改色相.饱和度.亮度 参看:http://blog.csdn.NET/sjf0115/article/details/7267063 2.使 ...

  3. ScrollView 与ListView 滑动冲突完美解决

    一.介绍ListView高度的设置方法 二.根据实际需求解决冲突问题 一.介绍ListView高度的设置方法 在ScrollView中使用ListView,ListView的高度会不正常. 方式一:在 ...

  4. ScrollView和ListView滑动冲突问题

    1.在ScrollView里面嵌套ListView时,ListView的滑动事件无法响应. 先看下事件分发的过程: 由父View层的  onInterceptTouchEvent    到中间层的on ...

  5. Android实践之ScrollView中滑动冲突处理

    转载注明出处:http://blog.csdn.net/xiaohanluo/article/details/52130923 1. 前言 在Android开发中,假设是一些简单的布局.都非常easy ...

  6. android中随着ScrollView的滑动,titleBar状态的改变

    今天项目有一个需求,,类是于QQ空间里面的一个功能,于是就研究了一下,嗯,说这么多,可能还有人不知道指的是那个,直接上效果图.见谅,不会弄动态图:   对,就是这种效果,我研究了一下,思路如下: 1. ...

  7. 当ViewPager嵌套在ScrollView/ListView里时,手势冲突如何处理?

    有时我们需要将ViewPager嵌套在其他已经含有手势动作的ViewGroup里,如ScrollView,ListView时,会造成手势冲突,如表现为ViewPager向左划时,不小心向上移动了一点距 ...

  8. Scroller应用:ListView滑动删除

    1.设计思路 在Scroller的应用--滑屏实现中使用Scroller实现滑屏效果,这里使用Scroller与ListView实现相似QQ滑动.然后点击删除功能.设计思路是Item使用Scrolle ...

  9. iOS 动态修改导航栏颜色 UINavigationBar

    示例 所谓动态修改  意思是 在当前页面滚动的过程中 亦或 是在 触发返回事件\进入一个新的页面  导航栏的动态变化 由于系统级别的navBar 高度集成  很多自己想实现的功能 很不好弄 如果是通过 ...

随机推荐

  1. 树莓派 Linux备忘

    //更新树莓派 sudo apt-mark hold raspberrypi-bootloader sudo apt-get update sudo apt-get upgrade //配置 rasp ...

  2. 有了大量微信用户,就不需要App了吗?

    小卢同学是我半年前在中关村车库咖啡认识的一个自由创业者,他从北航毕业后在一家IT上市公司只上了1年多的班就辞职创业了,他的创业项目属于国内度假旅游垂直细分领域:积累大量详细的旅游攻略,组成一个个温馨舒 ...

  3. 实现一个基于 SharePoint 2013 的 Timecard 应用(上)

    在 SharePoint 2013 上面实现一个 Timecard 应用的想法来自一个真实的需求,而实现的方案在我脑海里面盘旋已经很久了,终于这几天准备安排点儿时间将它实现出来. “ We start ...

  4. Normalize.css的使用及下载

    Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备 ...

  5. JS框架

    s框架就是将常用的方法进行封装,方便调取使用.一个框架是一个可复用的设计构件,它规定了应用的体系结构,阐明了整个设计.协作构件之间的依赖关系.责任分配和控制流程,表现为一组抽象类以及其实例之间协作的方 ...

  6. JS原型链

    JS作为发展了多年了对象语言,支持继承,和完全面向对象语言不同的是,JS依赖原型链来实现对象的继承. 首先JS的对象分两大类,函数对象和普通对象,每个对象均内置__proto__属性,在不人为赋值__ ...

  7. 【linux】free命令中cached和buffers的区别

    一.命令 [root@localhost ~]# free -m total used free shared buffers cached Mem: 7869 7651 218 1 191 5081 ...

  8. HTML5全屏(Fullscreen)API详细介绍

    // 整个页面 onclick=   launchFullScreen(document.documentElement); // 某个元素 launchFullScreen(document.get ...

  9. 数据库Sharding系列文章

    关于数据库Sharding的策略,有人整理出相关的方案,看完收获很大. 数据库分库分表(sharding)系列(五) 一种支持自由规划无须数据迁移和修改路由代码的Sharding扩容方案 数据库分库分 ...

  10. 网络IO之阻塞、非阻塞、同步、异步总结

    网络IO之阻塞.非阻塞.同步.异步总结 1.前言 在网络编程中,阻塞.非阻塞.同步.异步经常被提到.unix网络编程第一卷第六章专门讨论五种不同的IO模型,Stevens讲的非常详细,我记得去年看第一 ...