ReactNative: 使用Animted API实现向上滚动时隐藏Header组件

/**
 * 每次滚动时，重新设置headerTop的值
 */
onScroll = event =>{
    const y = event.nativeEvent.contentOffset.y
    if (y >= 270) return
    // headerTop即是Header和Content的top样式对应的值
    this.setState({
        headerTop: y
    })
}

this.state = {
  rotate: new Animated.Value(0) // 初始化用到的动画变量
}

...

// 这么映射是因为style样式需要的是0deg这样的值，你给它0这样的值，它可不能正常工作。因此必定需要一个映射处理。
this.state.rotate.interpolate({ // 将0映射成0deg，1映射成360deg。当然中间的数据也是如此映射。
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg']
})

// 这段代码表示：在滚动事件触发时，将event.nativeEvent.contentOffset.y 的值动态绑定到this.state.headerTop上
// 和最前面我通过this.setState动态设置的目的一样，但交给Animated.event做就不会造成视觉上的卡顿了。
onScroll={Animated.event([
   {
      nativeEvent: {
        contentOffset: { y: this.state.headerTop }
      }
   }
])}

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

class List extends Component {
  render() {
    // 模拟列表数据
    const mockData = [
      '富强',
      '民主',
      '文明',
      '和谐',
      '自由',
      '平等',
      '公正',
      '法治',
      '爱国',
      '敬业',
      '诚信',
      '友善'
    ]

    return (
      <FlatList
        onScroll={this.props.onScroll}
        data={mockData}
        renderItem={({ item }) => (
          <View style={styles.list}>
            <Text>{item}</Text>
          </View>
        )}
      />
    )
  }
}

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

  componentWillMount() {
    // P.S. 270,217,280区间的映射是告诉interpolate，所有大于270的值都映射成-50
    // 这样就不会导致Header在上滑的过程中一直向上滑动了
    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 (
      <View style={styles.container}>
        <Animated.View style={{ top: this.top }}>
          <View style={styles.header}>
            <Text style={styles.text}>linshuirong.cn</Text>
          </View>
        </Animated.View>
        {/* 在oHeader组件上移的同时，列表容器也需要同时向上移动，需要注意。 */}
        <Animated.View style={{ top: this.top }}>
          <List onScroll={this.animatedEvent} />
        </Animated.View>
      </View>
    )
  }
}

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'
  }
})