React Native Animated 不会在 FlatList 中触发 onScroll 事件

Question

我正在努力解决这个问题。

在 Expo 项目中，我有一个 FlatList 和 onScroll 事件，我想更改动画值，但没有任何反应。

这是我的代码：

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

这里有一个例子如何使用 Animated FlatList 点击 here

React Native Animated 不会在 FlatList 中触发 onScroll 事件

React Native Animated don't fire onScroll event in FlatList

javascript

react-native

react-animated

expo

react-native-flatlist