在ScrollView中查看叠加图像

Question

我在React Native中创建所需的UX效果时遇到了一些麻烦，我正在寻找关于如何创建所需效果的一些指导。我发现了很多不同的视差库，但没有一个支持叠加效果（见下图 - 圆角）。

左侧屏幕是初始屏幕。橙色视图覆盖背景图像的位置。当用户开始向下滚动时，图像应该消失，标题应该显示为右图像。 ＆＃39;后退＆＃39;按钮和“完成”按钮按钮应该是静态的，不要移动一英寸。

最终结果：

我正在寻找类似这样的事情：https://github.com/kyaroru/RNParallax只是白色区域覆盖图像并且有圆角，如下所示。

到目前为止我尝试了什么：

我已尝试使用下面的代码段来创建效果。然后，我将样式应用于橙色视图＆＃39;例如top: -40创建叠加效果。这只是过度滚动的副作用。超过40的滚动。

getInitialState: function() {
    return {
        scrollY: new Animated.Value(0)
    }
},
render() {
    return (
        <ScrollView
            scrollEventThrottle={16}
            onScroll={Animated.event(
                            [{nativeEvent: 
                            {contentOffset: 
                                {y: this.state.scrollY}
                            }
                            }]
            )}>
    // etc ...
}