PROSAGA码农传奇-html/HTML5-React Native：仅对几个元素之一进行动画处理

React Native：仅对几个元素之一进行动画处理

作者: 糖果
发布时间: 2024-03-23 08:02:44 (28天前)

我创建了一个 React Native 组件，它由 5 个连续的图标组成。图标是可点击的，我想为点击的那个图标制作动画。
我的问题是：当我点击一个图标时，所有的图标都是动画的。这是因为它们是在循环中生成的，并且都具有相同的属性。
如何设置我的组件，以便我只能以某种方式为按下的一个图标设置动画？
这是组件：

import React from 'react';
    import { StyleSheet, Animated, View, Text, TouchableHighlight, } from 'react-native';
    import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
    const AnimatedIcon = Animated.createAnimatedComponent(Icon);
    
    export class IconRow extends React.Component {  
    
      constructor(props) {
        super(props);
        this.state = { iconFontSize: new Animated.Value(50) };
      }
    
      onIconPress = (index) => {
        Animated.sequence([
          Animated.timing(this.state.iconFontSize, { toValue: 40, duration: 100 }),
          Animated.timing(this.state.iconFontSize, { toValue: 58, duration: 100 }),
          Animated.timing(this.state.iconFontSize, { toValue: 50, duration: 100 }),
        ]).start();
      }
    
      renderIcons() {
        var icons = [];
        for (var i = 0; i < 5; i++) {
          icons.push(
            <TouchableHighlight key={i} underlayColor="transparent" onPress={this.onIconPress.bind(this, i)}>       
              <AnimatedIcon name="heart" style={{fontSize:this.state.iconFontSize, color: "red"}} ></AnimatedIcon>
            </TouchableHighlight>   
          );        
        }
        return icons;
      }
    
      render() {
        return (
            <View style={{flexDirection: "row"}}>
              {this.renderIcons()}
            </View>
        );
      }
    }