react native 中的视差标头问题答案

【问题标题】：Problems with parallax header in react nativereact native 中的视差标头问题
【发布时间】：2018-02-27 04:13:21
【问题描述】：

尝试在 react native 中编写视差滚动视图。首先，这是我目前所拥有的：

正如您在上面的 GIF 中看到的，唯一的问题是，滚动视图中的子项在红线处消失，这是ScrollView 的原始顶部边框位置。我试图改变顶部边框的位置，但它不起作用，继续阅读。视差标头高度为170px，100px滚动后，图像停止向上，因此，粘性标头高度为70px

这是上面 GIF 的代码：

const parallaxHeaderHeight = 170;
const headerHeight = 70;
const headerDiff = parallaxHeaderHeight - headerHeight;    // 100px

class ParallaxScrollView extends Component {
    constructor(props) {
        super(props);

        this.scrollY = new Animated.Value(0);    // How many pixels scrolled
    }

    <View style={{ flex: 1 }}>
        <Animated.Image
            source={{ uri: '...' }}
            style={{
                width: ..., height: ...,
                transform: [
                    {
                        translateY: this.scrollY.interpolate({
                            inputRange: [-1, 0, headerDiff, headerDiff + 1],
                            outputRange: [0, 0, -headerDiff, -headerDiff]
                        })
                    },
                    {
                        scale: this.scrollY.interpolate({
                            inputRange: [-1, 0, 1],
                            outputRange: [1.005, 1, 1]
                        })
                    }
                ]
            }}
        />
        <Animated.ScrollView
            scrollEventThrottle={1}
            onScroll={Animated.event(
                [{ nativeEvent: { contentOffset: { y: this.scrollY } } }],
                { useNativeDriver: true }
            )}
        >
            // Then, render children here
        </Animated.ScrollView>
    </View>
}

然后，我尝试转换滚动视图的顶部边框，但是发生了这种情况：

查看滚动视图的第一个子视图0，当我滚动100px 时它消失了，但我想要的是它在滚动第一个100px 时保持可见。我知道为什么会这样，但我找不到解决方案。我应该如何修改我的代码？

【问题讨论】：

标签： reactjs animation react-native

【解决方案1】：

回答我自己的问题：这个问题可以用“hacky”解决方案来解决，但不推荐，原因如下。

首先，解决方案是 - 为滚动视图的子视图添加初始填充 (Looking at the code snippet in the question and adding this part to it)：

...
<Animated.Image
    ...
    style={{
        ...
        position: 'absolute', zIndex: 1,
        top: 0, left: 0, right: 0,
        height: parallaxHeaderHeight       // which is 170px in my case
        ...
    }}
    ...
/>
<Animated.ScrollView
    ...
    contentContainerStyle={{ paddingTop: parallaxHeaderHeight }}
    ...
>
    ...
</Animated.ScrollView>
...

这给了我：

缺陷在于，由于标题有position = absolute和zIndex = 1，部分滚动条隐藏在图片标题后面。但是，如果滚动条不重要，那没关系，这个“hacky”解决方案很好，不会导致任何性能问题

【讨论】：