Question

因此，目前我尝试了解Animated Api。为此，我尝试在“平面清单”中突出显示当前项目。问题是，animated.event不会更新我的animation.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>
    );
}

这里的相关事件代码是onScroll属性中的animation.event。当我用console.log记录event.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需要的参数不仅仅是我传递的事件参数。

教我！

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

1 个答案: