react native 顶部滚动

import React, {useState} from 'react'
import { Animated, ScrollView, useWindowDimensions, View } from 'react-native'
import { useEffect } from 'react/cjs/react.development';

export default function APP12() {

    const [headerHeight, setHeaderHeight] = useState(100);

    const [containerOffsetY, setContainerOffsetY] = useState(0);

    const v = new Animated.Value(0);

    useEffect(()=>{
        console.log('v---',v)
    })
    
    

    const {height, width} = useWindowDimensions();

    return (
        <>

            <Animated.View
                style={{
                    // position: 'absolute',
                    // zIndex: 10,
                    top: 0,
                    width: width,
                    transform: [{
                        translateY: v.interpolate({
                            inputRange: [0, headerHeight],
                            outputRange: [0, -headerHeight],
                        })
                    }]
                }}>
                    <View style={{width: '100%', height:300, backgroundColor: 'pink', borderColor:'red', borderWidth: 2}}>
                    </View>
            </Animated.View>

            <View style={{flex:1}}>
            <ScrollView
                style={{height: '100%', borderColor:'green', borderWidth: 2 ,zIndex: 1}}
                onScroll={
                    (e)=>{
                        // console.log('e========',e)
                        v.setValue(e.nativeEvent.contentOffset.y);
                    }
                }>
                <View
                // style={{marginTop:500}}
                >
                    <View style={{
                        width: '80%',
                        height: 500,
                        backgroundColor: 'orange',
                        marginBottom: 30
                    }}></View>
                    <View style={{
                        width: '80%',
                        height: 500,
                        backgroundColor: 'blue',
                    }}></View>
                </View>
            </ScrollView>
            </View>
        </>
    )
}