animated.event 好像没有更新 Animated.Value

Question

所以目前我试图理解动画 Api。为此，我尝试在平面列表中突出显示当前项目。问题是，animated.event 没有更新我的 animated.value ref.

    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>
    );
}

相关代码在 onScroll 属性中的 animated.event 处。当我 console.log 的 event.nativeEvent.contentOffset.x 值时，我可以看到，有些事情正在发生。

Answer 1

好吧，它接缝，不知何故 Animated.event 不会或不能更新 scrollX 值。我的解决方法是用 'simple'

替换 Animated.event 函数

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

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

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

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

教我！

animated.event 好像没有更新 Animated.Value

animated.event does not seem to update Animated.Value

react-native

react-animated