弹性 Header 与 React Native（在 ScrollView 中下拉并缩放顶部图像）

Question

有了 React-Native，我想实现 Stretchy header（在 ScrollView 中下拉并缩放顶部图像），在 http://blog.matthewcheok.com/design-teardown-stretchy-headers/

中提到

我们有这方面的插件吗？如果没有，你能告诉我如何用 React Native 实现吗？

Answer 1

实现ScrollView的onScroll函数，并检测其内容偏移。

并查看 https://github.com/lelandrichardson/react-native-parallax-view 了解更多详情。

<View style={{flex:1}}>
  <Image style={{width:320,position:'absolute'}} />
  <ScrollView style={{backgroundColor:'transparent'}}>
    <HeaderView />
    <Components />
  </ScrollView>
</View>

用'absolute'设置图片的位置。将 ScrollView 的背景颜色设置为 'transparent'。并在 ScrollView 中添加一个高度等于 Image 高度的 header 视图。然后是你的组件。 Animate 是可选的。

弹性 Header 与 React Native（在 ScrollView 中下拉并缩放顶部图像）

Stretchy Header with React Native (pull down in ScrollView and zoom top image)

react-native