React Native：いくつかの要素のうちの1つのみをアニメ化する

Question

5つのアイコンからなるReact Nativeコンポーネントを作成しました。 アイコンはクリック可能で、クリックされたアイコンをアニメートしたいと思います。

私の問題は：アイコンをクリックすると、すべてのアイコンがアニメーション化されます。これはループで生成され、すべて同じプロパティが与えられているためです。

私は何らかの理由で押されたアイコンをアニメーション化できるようにコンポーネントを設定できますか？

ここでは、コンポーネントの：

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

ここではあなたがこの問題に直面している理由ですアイコンの行全体を作成しているが。

ここでは、行を作成するのではなく、一度に1つのアイコンを作成する必要があります。 、 同様に、アイコンを作成するための1つのビューを取ると一列その後

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

をに設定され、IconRowクラスのrenderIcons機能、ループのために削除し、「私は」などの変数依存

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回だけ繰り返すことができます。

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つのアイコンしか作成されません。あなたが別の値に '1'を変更してくださいよりも別のキーを与える場合。

クリックしたものをアニメートします。

希望これは役に立ちます。