摘要：只能自己上了思路很清楚監(jiān)聽滾動(dòng)事件，動(dòng)態(tài)修改組件和組件的值當(dāng)然，他們默認(rèn)都是。插值對(duì)輸入范圍和輸出范圍之間做一個(gè)映射，通常使用線性插值，但也支持緩和函數(shù)。

想先推薦一下近期在寫的一個(gè)React Native項(xiàng)目，名字叫 Gakki ：是一個(gè)Mastodon的第三方客戶端 （Android App）

預(yù)覽

本來(lái)我也不想造這個(gè)輪子的，奈何沒找到合適的組件。只能自己上了～

思路很清楚： 監(jiān)聽滾動(dòng)事件，動(dòng)態(tài)修改Header組件和Content組件的top值（當(dāng)然，他們默認(rèn)都是position:relative）。

接下來(lái)實(shí)現(xiàn)的時(shí)候遇到了問題，我第一個(gè)版本是通過動(dòng)態(tài)設(shè)置state來(lái)實(shí)現(xiàn)，即：

/**
 * 每次滾動(dòng)時(shí)，重新設(shè)置headerTop的值
 */
onScroll = event =>{
    const y = event.nativeEvent.contentOffset.y
    if (y >= 270) return
    // headerTop即是Header和Content的top樣式對(duì)應(yīng)的值
    this.setState({
        headerTop: y
    })
}

這樣雖然能實(shí)現(xiàn)，但是效果不好：明顯可以看到在上滑的過程中，Header組件一卡一卡地向上方移動(dòng)（一點(diǎn)都不流暢）。

因?yàn)榫椭荒芰韺に耍?strong>動(dòng)畫

React Native 提供了兩個(gè)互補(bǔ)的動(dòng)畫系統(tǒng)：用于創(chuàng)建精細(xì)的交互控制的動(dòng)畫Animated和用于全局的布局動(dòng)畫LayoutAnimation （筆者注：這次沒有用到它）

首先，這兒有一個(gè)簡(jiǎn)單“逐漸顯示”動(dòng)畫的DEMO，需要你先看完（文檔很簡(jiǎn)單明了且注釋清楚，沒必要Copy過來(lái)）。

在看懂了DEMO的基礎(chǔ)上，我們還需要了解兩個(gè)關(guān)鍵的API才能實(shí)現(xiàn)完整的效果：

1. interpolate

插值函數(shù)。用來(lái)對(duì)不同類型的數(shù)值做映射處理。

當(dāng)然，這是文檔說(shuō)明：
Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
翻譯：
每個(gè)屬性可以先經(jīng)過插值處理。插值對(duì)輸入范圍和輸出范圍之間做一個(gè)映射，通常使用線性插值，但也支持緩和函數(shù)。默認(rèn)情況下，如果給定數(shù)據(jù)超出范圍，他也可以自行推斷出對(duì)于的曲線，但您也可以讓它箝位輸出值（P.S. 最后一句可能翻譯錯(cuò)誤，因?yàn)闆]搞懂clamp value指的是什么, sigh...）

舉個(gè)例子：

在實(shí)現(xiàn)一個(gè)圖片旋轉(zhuǎn)動(dòng)畫時(shí)，輸入值只能是這樣的：

this.state = {
  rotate: new Animated.Value(0) // 初始化用到的動(dòng)畫變量
}

...

// 這么映射是因?yàn)閟tyle樣式需要的是0deg這樣的值，你給它0這樣的值，它可不能正常工作。因?yàn)楸囟ㄐ枰粋€(gè)映射處理。
this.state.rotate.interpolate({ // 將0映射成0deg，1映射成360deg。當(dāng)然中間的數(shù)據(jù)也是如此映射。
  inputRange: [0, 1],
  outputRange: ["0deg", "360deg"]
})

2. Animated.event

一般動(dòng)畫的輸入值都是默認(rèn)設(shè)定好的，比如前面DEMO中的逐漸顯示動(dòng)畫中的透明度：開始是0，最后是1。這是已經(jīng)寫死了的。

但如果有些動(dòng)畫效果需要的不是寫死的值，而是動(dòng)態(tài)輸入的呢，比如：手勢(shì)（上滑、下滑，左滑，右滑...）、其它事件。

那就用到了Animated.event。

直接看一個(gè)將滾動(dòng)事件的y值(滾動(dòng)條距離頂部高度)和我們的動(dòng)畫變量綁定起來(lái)的例子：

// 這段代碼表示：在滾動(dòng)事件觸發(fā)時(shí)，將event.nativeEvent.contentOffset.y 的值動(dòng)態(tài)綁定到this.state.headerTop上
// 和最前面我通過this.setState動(dòng)態(tài)設(shè)置的目的一樣，但交給Animated.event做就不會(huì)造成視覺上的卡頓了。
onScroll={Animated.event([
   {
      nativeEvent: {
        contentOffset: { y: this.state.headerTop }
      }
   }
])}

關(guān)于API更多的說(shuō)明請(qǐng)移步文檔

import React, { Component } from "react"
import { StyleSheet, Text, View, Animated, FlatList } from "react-native"

class List extends Component {
  render() {
    // 模擬列表數(shù)據(jù)
    const mockData = [
      "富強(qiáng)",
      "民主",
      "文明",
      "和諧",
      "自由",
      "平等",
      "公正",
      "法治",
      "愛國(guó)",
      "敬業(yè)",
      "誠(chéng)信",
      "友善"
    ]

    return (
       (
          
            {item}
          
        )}
      />
    )
  }
}

export default class AnimatedScrollDemo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      headerTop: new Animated.Value(0)
    }
  }

  componentWillMount() {
    // P.S. 270,217,280區(qū)間的映射是告訴interpolate，所有大于270的值都映射成-50
    // 這樣就不會(huì)導(dǎo)致Header在上滑的過程中一直向上滑動(dòng)了
    this.top = this.state.headerTop.interpolate({
      inputRange: [0, 270, 271, 280],
      outputRange: [0, -50, -50, -50]
    })

    this.animatedEvent = Animated.event([
      {
        nativeEvent: {
          contentOffset: { y: this.state.headerTop }
        }
      }
    ])
  }

  render() {
    return (
      
        
          
            linshuirong.cn
          
        
        {/* 在oHeader組件上移的同時(shí)，列表容器也需要同時(shí)向上移動(dòng)，需要注意。 */}
        
          
        
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  list: {
    height: 80,
    backgroundColor: "pink",
    marginBottom: 1,
    alignItems: "center",
    justifyContent: "center",
    color: "white"
  },
  header: {
    height: 50,
    backgroundColor: "#3F51B5",
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    color: "white"
  }
})