我们常见某些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. hibernate的get和load的区别

    在hibernate中我们知道如果要从数据库中得到一个对象,通常有两种方式,一种是通过session.get()方法,另一种就是通过session.load()方法,然后其实这两种方法在获得一个实体对 ...

  2. Android教程收集贴

    Loader & REST Rest Loader Tutorial [github源码] [源码演示] [github作者主页] Twitter Timeline Sample for An ...

  3. C# List 排序各种用法与比较

    下面介绍各种List的sort的用法与比较 首先,我们建一个People的实体,有name.age.sex的属性,我们要排序的字段是年龄age 新建一个实体类 public class People ...

  4. [Erlang 0125] Know a little Erlang opcode

    Erlang源代码编译为beam文件,代码要经过一系列的过程(见下面的简图),Core Erlang之前已经简单介绍过了Core Erlang,代码转换为Core Erlang,就容易拨开一些语法糖的 ...

  5. Hibernate 系列 06 - 对象在JVM中的生命周期

    引导目录: Hibernate 系列教程 目录 Java对象通过new命令进行创建,Java虚拟机(Java Virtual Machine,JVM)会为新的Java对象在内存中开辟一个新空间以存放次 ...

  6. Python 代码风格

    1 原则 在开始讨论Python社区所采用的具体标准或是由其他人推荐的建议之前,考虑一些总体原则非常重要. 请记住可读性标准的目标是提升可读性.这些规则存在的目的就是为了帮助人读写代码,而不是相反. ...

  7. 编译protobuf的jar文件

    1.准备工作 需要到github上下载相应的文件,地址https://github.com/google/protobuf/releases protobuf有很多不同语言的版本,因为我们需要的是ja ...

  8. 烂泥:切割nginx日志

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 这几天自己看了下博客的nginx日志,发现日志文件发现越来越大. 因为nginx自己不会 ...

  9. 深度优先搜索(DFS)

    [算法入门] 郭志伟@SYSU:raphealguo(at)qq.com 2012/05/12 1.前言 深度优先搜索(缩写DFS)有点类似广度优先搜索,也是对一个连通图进行遍历的算法.它的思想是从一 ...

  10. C#剪切,复制,粘贴底层应用编写

    zz备用复制剪切粘贴的底层应用 /// <summary> /// 复制或剪切文件至剪贴板(方法) /// </summary> /// <param name=&quo ...