Question

我有一个数组的数据，这些数据在React-Native的平面列表中呈现。当我按下一个项目时，我只想对其进行动画处理。.我有点困惑，无法解决如何对其进行动画处理。.有人可以显示并解释吗？因为我找不到任何用Flatlist渲染解释的解释。

   constructor(props){ 
super(props); 
this.state = { animation: new Animated.Value(1) }


startAnimation (x){
        Animated.timing(this.state.animation, {
            toValue: 1.5,
            duration: 1500
        }).start();
    }


 _renderItem = ({item, index}) => {

        return(
            <Animated.View key={index} style={{margin: 10, transform:[{scale: this.state.animation}]}}>
                <TouchableOpacity onLongPress={() => this.activateItem(item.id)} onPress={() => this.startAnimation(index)}>
                    <Image source={ images[item.item_id].uri } style={{width: 60, height: 60}}/>
                </TouchableOpacity>
            </Animated.View>
        );

    };



 render(){
        return(

            <View style={{flex: 1}}>

                <FlatList
                      numColumns={4}
                      data={this.state.items}
                      renderItem={this._renderItem}
                      keyExtractor={this._keyExtractor}
                      extraData={this.state.animation}
                />

            </View>

        );
    }

Answer 1

您需要做的是将项目和动画状态隔离在另一个组件中，然后每个项目都将具有您自己的动画，并且当单击此项目时，只有他会被动画化！ see this example working

如何在React Native中为Flatlist数组中的单个项目设置动画

1 个答案: