为平面列表上的单个项目设置动画

Question

我如何为平面列表中的单个项目设置动画？

我尝试添加一个值来隔离选定的记录，但没有奏效，也许我写错了。 Atm 动画在所有记录中

平面列表：

 <View style={style.container}>
                <FlatList
                    data={this.state.ReturnedArray}
                    width='100%'
                    ItemSeparatorComponent={this.FlatListItemSeparator}
                    renderItem={this.renderizza}>

渲染Flalist：

renderizza = (item) => {
        var str = JSON.parse(JSON.stringify(item.item.itemType)).name + ' ' + JSON.parse(JSON.stringify(item.item.itemType)).cognome
        let acronym = str.split(/\s/).reduce((response, word) => response += word.slice(0, 1), '')
        return (
            <View style={style.containerFlat}>
                <View style={style.containerFlat1}>    
                    <Text style={style.txt}>{JSON.parse(JSON.stringify(item.item.itemType)).name} {JSON.parse(JSON.stringify(item.item.itemType)).cognome}</Text>
                </View>
               <TouchableOpacity style={style.containerFlat2} onPress={() => this.badge(JSON.parse(JSON.stringify(item.item.itemType)).expoToken)}> 
                    <Animated.View style={[style.animatedView, { opacity: this.state.fadeValue}]}><Text>ADDED</Text></Animated.View>
                    <Text style={style.AvatarTxt}  >{acronym}</Text>
                </TouchableOpacity>
            </View>
        )
    }

这里是动画：

    badge(chiavi) {
        console.log(chiavi)
        if ((this.state.SelectedUser).includes(chiavi)) {
            this.state.SelectedUser.splice(this.state.SelectedUser.indexOf(chiavi), 1)
            Animated.timing(this.state.fadeValue, {
                toValue: 0,
                duration: 0
            }).start();
        } else {
            this.state.SelectedUser.push(chiavi)
            Animated.timing(this.state.fadeValue, {
                toValue: 1,
                duration: 0
            }).start()
        }
    }

热修复？ 谢谢

Answer 1

一种方法是在状态下保持一个活动项，并在Flatlist 中为这个变量使用extraData 属性。然后有条件地在动画项和普通项之间渲染。

animate = index => {
    this.setState({
      activeItem: index,
    });
     //Rest of animation code.
  };

<TouchableOpacity onPress={e => this.animate(index)}>
   {this.state.activeItem === index && (
      <Animated.View
         style={[
                styles.button,
                { transform: [{ scale: this.animationMap }] },
                ]}
      >
        <Text>{item.title}</Text>
      </Animated.View>
      )
   }
   {this.state.activeItem !== index && (
          <View style={styles.button}>
            <Text>{item.title}</Text>
          </View>
        )
   }
 </TouchableOpacity>

这是一个示例Demo