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

问题描述

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

在 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，会不会导致这个问题？

我不知道该怎么想了

感谢解答

解决方法

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