如何在滚动到视图时淡化为完全不透明

Question

我希望FlatList中的各个项目在滚动查看时逐渐消失：

export default HomeScreen = () => {
    const [animation] = useState(new Animated.Value(0))
    Animated.timing(animation, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
    }).start()

    const opacityInterpolate = animation.interpolate({
        inputRange: [0, 1],
        outputRage: [0, 1],
        extrapolate: 'clamp',
    })

    const scrollOpacityStyle = {
        opacity: opacityInterpolate
    }

    const handleScroll = e => {
        if (e.nativeEvent.contentOffset.y > 50) {
         // some event
        }
    }

    return (
        <ScrollView
            contentContainerStyle={styles.scrollView}
            showsVerticalScrollIndicator={false}
            refreshControl={true}
            bounces={false}
            onScroll={e => handleScroll(e)}
            scrollEventThrottle={8}
        >
            <FlatList
                data={items.slice(0, 6)}
                renderItem={({ item, index }) =>
                    <Item
                        item={item}
                        index={index}
                    />
                }
                numColumns={2}
                horizontal={false}
                keyExtractor={item => item.id.toString()}
                showsVerticalScrollIndicator={false}
                scrollEnabled={false}
            />
        </ScrollView >
    )
}

我正在尝试使用onScroll方法来达到效果，但是我不确定该怎么做。