React Native中的視差標頭問題

Question

嘗試在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時保持可見狀態。 我知道為什么會這樣，但是我找不到解決方案。 我應該如何修改我的代碼？

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”解決方案很好，不會造成任何性能問題