如何在React Native中实现滚动折叠的UI小部件？

Question

标准的iOS天气应用程序具有特殊的滚动UI行为：

用户界面中有很多部分：上部（带有20大数字），中间（水平）栏，下部（带有工作日和页脚）。

向上滚动时，

• 上部不会滚动，但会折叠直到具有一定的最小高度，然后才“粘”在那里。
• 中间栏向上滚动直到上部不再折叠，然后“粘在”那里。
• 下部（其高度超过屏幕容纳的高度）向上滚动而没有任何特殊行为。
• 页脚是固定的，并且与下部重叠。

如何在React Native中实现类似的功能？我不需要所有的细节，只需要了解如何实现上半部分，即一个在滚动时折叠的组件，直到它固定在顶部，最小高度。

当然，我更喜欢纯RN解决方案，该解决方案在iOS和Android上均可使用。

Answer 1

找到了一个示例here。

只有真正滚动的部分在ScrollView内部，而折叠部分则不在。然后，您挂起ScrollView.onScroll事件，并通过contentOffset和Animated.event将Animated.interpolate属性连接到标题的高度：

const HEADER_EXPANDED_HEIGHT = 300
const HEADER_COLLAPSED_HEIGHT = 60
export default class App extends Component {
  constructor() {
    super()
    this.state = {
      scrollY: new Animated.Value(0)
    }
  }
  render() {
    const headerHeight = this.state.scrollY.interpolate({
      inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
      outputRange: [HEADER_EXPANDED_HEIGHT, HEADER_COLLAPSED_HEIGHT],
      extrapolate: 'clamp'
    })
    return(
      <View style={styles.container}>
        <Animated.View style={{height: headerHeight}}/>
          <ScrollView
            contentContainerStyle={styles.scrollContainer}
            onScroll={Animated.event(
              [{ nativeEvent: {
                   contentOffset: {
                     y: this.state.scrollY
                   }
                 }
              }])}
            scrollEventThrottle={16}>
            ...
          </ScrollView>
      </View>
    )
  }
}