React Native : 몇 가지 요소 중 하나만 애니메이션하기

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

당신이이 문제에 직면 왜 그 아이콘의 전체 행을 만들 수 있습니다.

행을 만드는 대신 한 번에 하나의 아이콘을 만들어야합니다. , 처럼 아이콘을 생성하기위한 하나의 뷰를 가지고 하나 개의 행이 후

<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> 
); 

또는 루프를 한 번만 반복 할 수 있습니다.

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'을 다른 값으로 변경하십시오.

클릭 한 애니메이션을 활성화하십시오.

희망 도움이 될 것입니다.