React Native中的视差标头问题 [英] Problems with parallax header in react native

问题描述

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

Trying to write a parallax scroll view in react native. First off, this is what I have so far:

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

The only problem, as you can see in the GIF above, is that, children in scroll view disappear at the red line, which is the ScrollView's original top border position. I've tried to change the top border position but it doesn't work, continue to read. The height of the parallax header is 170px, after 100px scrolled, the image stops going up, therefore, the sticky header height is 70px

以下是上面GIF的代码：

Here is the code for the GIF above:

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>
}

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

Then, I've tried to transform the top border of scroll view, but this happens:

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

Look at the first child of the scroll view, 0, it disappears when I've scrolled 100px, but what I want is for it to stay viewable when scrolling the first 100px. I know why this is happening, but I can't find a solution. How should I modify my code?

推荐答案

回答我自己的问题：这个问题可以通过 hacky解决方案解决，但是不建议使用，出于以下原因。

Answering my own question: This problem can be solved with a 'hacky' solution, but is not recommended, for reasons listed below.

首先，解决方法是-向滚动视图的子级添加初始填充（问题中的代码段并将其添加到其中）：

First of all, the solution is - Add an initial padding to the scroll view's children (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解决方案很好，不会造成任何性能问题

The flaw is that, part of the scroll bar is hidden behind the image header due to the fact that the header has position = absolute and zIndex = 1. But if the scroll bar is not important, then never mind, this 'hacky' solution is just fine and doesn't cause any performance issue

这篇关于React Native中的视差标头问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！