React Native Animated 不會在 FlatList 中觸發 onScroll 事件

Question

我正在努力解決這個問題。

在 Expo 項目中，我有一個 FlatList 和 onScroll 事件，我想更改 Animated 值，但沒有任何反應。

這是我的代碼：

import React, { useRef } from 'react';
import { View, FlatList, StyleSheet, Text, Animated } from 'react-native';

import ProductItem from './ProductItem';

const HEADER_MAX_HEIGHT = 250;
const HEADER_MIN_HEIGHT = 88;
const CARD_MAX_SCALE = 1;
const CARD_MIN_SCALE = 0.5;

const ProductsList = (props) => {
    const { products, onSelect, onDelete } = props;

    const scrollY = useRef(new Animated.Value(0)).current;
    const onScrollHandler = Animated.event([{
        nativeEvent: {
            contentOffset: { y: scrollY }
        }
    }],
        { useNativeDriver: true }
    );

    const height = scrollY.interpolate({
        inputRange: [0, HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT],
        outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
        extrapolateRight: 'clamp'
    });


    console.log(scrollY); // Never log a new value, never rerender component

    return (
        <View style={styles.listContainer}>
            <Animated.FlatList
                {...props}
                scrollEventThrottle={16}
                data={products}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({ item, index }) => <ProductItem product={item} onPress={() => { onSelect(item) }} onDelete={onDelete} />}
                onScroll={onScrollHandler}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    listContainer: {
        flex: 1,
        paddingTop: '20%',
        paddingBottom: 10,
    }
});

export default ProductsList;

我哪里錯了？

我還安裝了 react-native-reanimated V2，可能會導致問題嗎？

我不知道該怎么想了

感謝您的回答

Answer 1

這是一個示例如何使用動畫平面列表單擊此處