react仿京东客户端首页导航条动画效果

之前使用好多客户端都做了这样的效果，就是可以随着滑动的距离调节导航条的透明度和颜色。所以说，这个效果学会之后，不管是京东还是qq的个人资料页，都不在话下。

实现原理：既然是随着滑动的距离来调节导航条的透明度和颜色，那么ScrollView就是少不了的了。然后，还需要的一个回调函数，用来监听它的滑动事件，这个时候我们就可以获得ScrollVie的坐标变化。最后，只需要将我们拿到的y轴的坐标变化值与导航条的属性绑定起来即可。

闲话不多说，直接上代码……

代码实现：

<ScrollView style={{flex: 1}} ref='scroll'
onScroll={this._onScroll.bind(this) }
scrollEventThrottle={16}>
...
...
...
</ScrollView>

当ScrollView滑动的时候，onScroll方法会不停的回调，所以我们要在onScroll方法中将y轴的变化值与导航栏的属性值进行绑定。

_onScroll(e) {
Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
{
listener: () => {
// let y = e.nativeEvent.contentOffset.y;
}
}
)(e);
}

注：this.state.scrollY要在构造函数中进行初始化，this.state = {scrollY: new Animated.Value(0)}。

最后就是用这个this.state.scrollY的值来动态的改变导航栏的效果。

<Animated.View
style={{position: 'absolute',top: 0,left: 0,right: 0,height: 64,
backgroundColor: '#fafafa',
opacity: this.state.scrollY.interpolate({
inputRange: [0, 100, 100 + 0.5],
outputRange: [0, 0.9, 0.9]
}),
}}>
</Animated.View>

注：用的是带动画的View(Animated.View)，将y轴的变化绑定到opacity属性上，随着滑动，改变导航栏的透明度，滑动100的时候，导航栏效果不变。