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的時候，導航欄效果不變。