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的时候，导航栏效果不变。