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

问题描述

因此，目前我尝试了解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值时，我看到有些事情正在发生。

解决方法

很好的说明了，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需要的参数不仅仅是我传递的事件参数。

教我！