Question

尝试在反应原生中编写视差滚动视图。首先，这是我到目前为止：

唯一的问题，正如您在上面的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时它会消失，但我想要的是滚动第一个{{1}时保持可见状态}。我知道为什么会这样，但我找不到解决方案。我该如何修改我的代码？

Answer 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”解决方案很好，不会导致任何性能问题

反应原生中视差头的问题

1 个答案: