带有React Native的Stretchy Header（在ScrollView中下拉并缩放顶部图像）

Question

有了React-Native，我想实现Stretchy标头（在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>

使用绝对＆＃39;制作图像的位置。 使ScrollView的backgroundColor具有“透明＆＃39;”。 并向ScrollView添加一个高度等于Image高度的标题视图。 然后你的组件。 Animate是可选的。