ReactNative 根据scrollView/listview滑动距离动态修改NavBar颜色

时间：2022-01-05 09:22:02

我们常见某些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

相关文章