Rn页面滚动显示隐藏head动画

完整代码

import { View, Text, StyleSheet, Animated } from 'react-native'
export default () => {
    const opacity = new Animated.Value(0)
    const handleScroll = Animated.event(
        [{ nativeEvent: { contentOffset: { y: opacity } } }],
        { useNativeDriver: true }
    )

    return (
        <>
            <Animated.View style={{
                ...styles.head,
                opacity: opacity.interpolate({ inputRange: [0, 50], outputRange: [0, 1], extrapolate: 'extend' })
            }}
            >
                <Text>头部</Text>
            </Animated.View>
            <Animated.ScrollView onScroll={handleScroll} scrollEventThrottle={16}>
                {[0, 0, 0, 0, 0, 0, 0].map((item, index) => (
                    <View style={styles.item} key={index}>
                        <Text>占位</Text>
                    </View>
                ))}
            </Animated.ScrollView>
        </>
    )
}
const styles = StyleSheet.create({
    head: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: 100,
        backgroundColor: '#2D73FF',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 1,
    },
    item: {
        height: 300,
        width: "100%"
    }
})