animated.event似乎没有更新Animated.Value

Question

所以现在我试着去理解动画里的阿皮。为此，我试图在Flatlist中突出显示当前项。问题是，animated.event没有更新我的animated.value参考文件。

    import React, { useRef, useEffect } from 'react';
import { View, Animated, Text, TouchableOpacity, FlatList, Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');

const ITEM_WIDTH = width * 0.7;
const ITEM_HEIGHT = 300;

const data = [
    {
        key: 1,
        color: 'blue'
    },
    {
        key: 2,
        color: 'green'
    },
    {
        key: 3,
        color: 'black'
    },
    {
        key: 4,
        color: 'magenta'
    },
    {
        key: 5,
        color: 'red'
    },
    {
        key: 6,
        color: 'beige'
    },
    {
        key: 7,
        color: 'yellow'
    },
    {
        key: 8,
        color: 'orange'
    }
];

export function FirstAnimation() {
    const scrollX = useRef(new Animated.Value(0)).current;
    return (
        <View style={{ flex: 1 }}>
            <Animated.FlatList
                showsHorizontalScrollIndicator={false}
                data={[ { key: 'left' }, ...data, { key: 'right' } ]}
                keyExtractor={(item, index) => index}
                horizontal
                contentContainerStyle={{ alignItems: 'center' }}
                snapToInterval={ITEM_WIDTH}
                bounces={false}
                onScroll={(event) => {
                    Animated.event([ { nativeEvent: { contentOffset: { x: scrollX } } } ], {
                        useNativeDriver: true
                    });
                    console.log(
                        ITEM_WIDTH + '  and ' + event.nativeEvent.contentOffset.x + '  and ' + JSON.stringify(scrollX)
                    );
                }}
                style={{ fley: 1 }}
                scrollEventThrottle={16}
                decelerationRate={0}
                renderItem={({ item, index }) => {
                    const inputRange = [ (index - 2) * ITEM_WIDTH, (index - 1) * ITEM_WIDTH, index * ITEM_WIDTH ];
                    const translateOpacity = scrollX.interpolate({ inputRange, outputRange: [ 0.5, 0.9, 0.5 ] });

                    if (!item.color) {
                        return <View style={{ height: 200, width: (width - ITEM_WIDTH) / 2 }} />;
                    }

                    return (
                        <Animated.View
                            style={{
                                width: ITEM_WIDTH
                            }}
                        >
                            <Animated.View
                                style={{
                                    opacity: translateOpacity,
                                    width: ITEM_WIDTH,
                                    height: ITEM_HEIGHT,
                                    borderRadius: 20,
                                    backgroundColor: item.color,
                                    position: 'absolute'
                                }}
                            >
                                <Text>{index}</Text>
                            </Animated.View>
                        </Animated.View>
                    );
                }}
            />
            <Text>{JSON.stringify(scrollX)}</Text>
        </View>
    );
}

相关代码在这里，animated.event在onScroll支柱中。当我看到事件.nativeEvent.contentOffset.x值时，我可以看到，有些东西是触觉的。

Answer 1

好吧，它接缝，不知为何Animated.event不更新或不能更新scrollX值。我的解决办法是用“简单”替换Animated.event函数

scrollX.setValue(event.nativeEvent.contentOffset.x)

可能是这样的，因为我在一个额外的函数中运行Animated.event：

onScroll={(event) => {
                Animated.event([ { nativeEvent: { contentOffset: { x: scrollX } } } ], {
                    useNativeDriver: true
                });
                [...]
            }}

我的想法是，onScroll传递更多的参数，Animated.event需要更多的参数，而不仅仅是我传递的事件参数。

教我！