React Native:仅动画几个元素之一

Question

i创建了一个反应本机组件，该组件由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"}} />
        </TouchableHighlight>   
      );        
    }
    return icons;
  }
  render() {
    return (
        <View style={{flexDirection: "row"}}>
          {this.renderIcons()}
        </View>
    );
  }
}

小吃：https：//snack.expo.io/hjj0edhlz

Answer 1

@eric-我无法在本地测试，但是我敢肯定它会做您想要的。如果它没有解决，请告诉我，我会删除我的答案。

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 = { 
      iconFontSizes: [
        new Animated.Value(50),
        new Animated.Value(50),
        new Animated.Value(50),
        new Animated.Value(50),
        new Animated.Value(50)
      ], 
    };
  }
  onIconPress = (i) => {
    Animated.sequence([
      Animated.timing(this.state.iconFontSizes[i], { toValue: 40, duration: 100 }),
      Animated.timing(this.state.iconFontSizes[i], { toValue: 58, duration: 100 }),
      Animated.timing(this.state.iconFontSizes[i], { toValue: 50, duration: 100 }),
    ]).start();
  }
  renderIcons() {
    var icons = [];
    for (var i = 0; i < this.state.iconFontSizes.length; i++) {
      icons.push(
        <TouchableHighlight key={i} underlayColor="transparent" onPress={this.onIconPress.bind(this, i)}>       
          <AnimatedIcon name="heart" style={{fontSize:this.state.iconFontSizes[i], color: "red"}} />
        </TouchableHighlight>   
      );        
    }
    return icons;
  }
  render() {
    return (
        <View style={{flexDirection: "row"}}>
          {this.renderIcons()}
        </View>
    );
  }
}

Answer 2

在这里，您正在创建整个图标，这就是您面对此问题的原因。

在这里，您必须一次创建一个图标，而不是创建一行。就像，以创建图标并在一行中设置的一个视图

<View style = {{flexDirection:'row'}} >
    <IconRow />
    <IconRow />
    <IconRow />
    <IconRow />
    <IconRow />
</View>

之后，rendericons在Iconrow类中起作用，删除循环并依赖变量'i'喜欢，

icons.push(
        <TouchableHighlight key={1} underlayColor="transparent" onPress={this.onIconPress.bind(this, 1)}>       
          <AnimatedIcon name="heart" style={{fontSize:this.state.iconFontSize, color: "red"}} />
        </TouchableHighlight> 
);

，或者您只能循环一次，例如

for (var i = 0; i < 1; i++) {
      icons.push(
        <TouchableHighlight key={1} underlayColor="transparent" onPress={this.onIconPress.bind(this, 1)}>       
          <AnimatedIcon name="heart" style={{fontSize:this.state.iconFontSize, color: "red"}} />
        </TouchableHighlight> 
      );
}

因此，它一次仅创建一个图标。如果您想给出不同的键，请将" 1"更改为另一个值。

现在将单击的一个动画。

希望它会有所帮助。

Answer 3

这是因为您调用了每个呼叫中具有相同引用的相同函数。在该组件中创建一个新的组件和循环，以便每个图标都具有自己的功能，并具有不同的参考。

这将是图标的组成部分

const Icon = ({ i }) => {
    const iconFontSize = new Animated.Value(50)
    const onIconPress = () => {
        Animated.sequence([
          Animated.timing(iconFontSize, { toValue: 40, duration: 100 }),
          Animated.timing(iconFontSize, { toValue: 58, duration: 100 }),
          Animated.timing(iconFontSize, { toValue: 50, duration: 100 }),
     ]).start();}

    return (
        <TouchableHighlight key={i} underlayColor="transparent" onPress {onIconPress}>       
          <AnimatedIcon name="heart" style={{fontSize: iconFontSize, color: "red"}} />
        </TouchableHighlight>   
    )
}

bellow将是您将导入上述图标组件并循环的父组件。现在，在每个循环中，您将拥有一个组件和动画功能，仅与该组件相关联。

const IconRow = ({ }) => {
    renderIcons = () => {
      var icons = [];
      for (var i = 0; i < 5; i++) {
        icons.push(<Icon i={ i } />);        
      }
      return icons;
    }
    return (
        <View style={{flexDirection: "row"}}>
          {renderIcons()}
        </View> 
    )
}