Экспо: выбрать несколько элементов плоского списка (изменить стиль)

Question

Я пытаюсь добавить значок в View с помощью TouchableOpacity при печати.Беда в том, что анимационная работа появляется только по одному элементу одновременно, а не по двум или более одновременно

Здесь код:

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

 <FlatList
    data={this.state.ReturnedArray}
    width='100%'
    ItemSeparatorComponent={this.FlatListItemSeparator}
    keyExtractor={(item, index) => 'key' + index}
    renderItem={this.renderizza}
    extraData={this.state.activeItem}
/>

Функция рендеринга:

 <View style={style.containerFlat}>
    <View style={style.containerFlat1}>
        <Text style={style.txt}>{item.name} {item.cognome}</Text>
    </View>
    <TouchableOpacity style={style.containerFlat2} onPress={() => this.badge(item.expoToken,index)}>
      {(this.state.activeItem === index) ? <Animated.View style={[style.animatedView, { opacity: this.state.fadeValue }]}><Text>ADDED</Text></Animated.View> : null} 
        <Text style={style.AvatarTxt}  >{acronym}</Text>
    </TouchableOpacity>
</View>

Функция значка добавления токена в массив и анимация обеда:

 badge(chiavi, index) {
    if ((this.state.SelectedUser).includes(chiavi)) {
        this.Nonanimate(index)  
        this.state.SelectedUser.splice(this.state.SelectedUser.indexOf(chiavi), 1)
    } else {
        this.state.SelectedUser.push(chiavi)
        this.animate(index)
    }

}

и анимация / NotAnimation:

 animate = (index) => {
    this.setState({
        activeItem: index,
    });
    Animated.timing(this.state.fadeValue, {
        toValue: 1,
        duration: 0
    }).start()
};

Nonanimate = index => {
    this.setState({
        activeItem: index,
    });
    Animated.timing(this.state.fadeValue, {
        toValue: 0,
        duration: 0
    }).start()
};

я трачу днина эту неприятность.Предложить?

Answer 1

Вот функция для решения этой проблемы:

badge = chiavi => {
        //console.log(chiavi.item.expoToken)
        if ((this.state.SelectedUser).includes(chiavi.item.expoToken)) {
            // this.Nonanimate(index)
            this.state.SelectedUser.splice(this.state.SelectedUser.indexOf(chiavi.item.expoToken), 1)
        } else {
            this.state.SelectedUser.push(chiavi.item.expoToken)
            // this.animate(index)
        }

        chiavi.item.isSelect = !chiavi.item.isSelect;
        chiavi.item.selectedClass = chiavi.item.isSelect ?
            style.selected : style.containerFlat1;
        const index = this.state.ReturnedArray.findIndex(
            item => chiavi.item.user_id === item.user_id
        );
        this.state.ReturnedArray[index] = chiavi.item;
        this.setState({
            ReturnedArray: this.state.ReturnedArray,
        });

и Flatlist:

 <FlatList
                    data={this.state.ReturnedArray}
                    width='100%'
                    ItemSeparatorComponent={this.FlatListItemSeparator}
                    keyExtractor={item => item.user_id.toString()}
                    renderItem={item => this.renderizza(item)}
                    extraData={this.state}
                />

Источник: Ссылка здесь