向下滚动动画时使图像更大-React Native

Question

我希望当我用手指向下滚动时，保存图像的标题变大，就像这个应用程序一样（忽略弯曲的视图）：

Animation I want to Achieve

这是我的代码：

constructor (props) {
    super(props)
    this.state = {
        scrollY: new Animated.Value(0),
    }
}

render () {
    const headerHeight = this.state.scrollY.interpolate({
        inputRange: [ -100, 100],
        outputRange: [10, 200],
        extrapolate: 'extend'

    });

    return (
      <View>
          <Animated.View style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              height: headerHeight,
          }}>

              <Image
                style={{ backgroundColor: 'red', height: 600, width: FULL_WIDTH}}
                source={{uri: this.props.image}}
              />

          </Animated.View>
          <ScrollView style={{backgroundColor: 'red', marginTop: HEADER_MAX_HEIGHT}}
                      scrollEventThrottle={16}
                      onScroll={Animated.event(
                        [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
                      )}>
              <View>

                  <Text>
                      {this.props.title}
                  </Text>
                  <Text>
                      {this.props.description}
                  </Text>
              </View>
          </ScrollView>


      </View>


    )
}

您可以假设已启用Animated，并且所有其他标签都已导入，并且道具已插入。

谢谢。