Анимировать один элемент в плоском списке - PullRequest
Новая
       8

Анимировать один элемент в плоском списке

0 голосов
/ 20 сентября 2019

Как я могу анимировать один элемент из плоского списка?

Я попытался добавить значение, чтобы изолировать выбранную запись, но не сработало, возможно, я написал что-то не так.На данный момент анимация на ВСЕХ записях

Плоский список: 

 <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()
        }
    }

Горячий исправить?Спасибо

1 Ответ

0 голосов
/ 20 сентября 2019

Один из способов - сохранить активный элемент в состоянии и использовать extraData prop для этой переменной в Flatlist. Затем условно отобразить между анимированным и обычным элементом. 

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>

Вотобразец Демо

...