Expo：选择平面列表的多个项目（更改样式）答案

【问题标题】：Expo : Select Multiple item of flatlist ( change style)Expo：选择平面列表的多个项目（更改样式）
【发布时间】：2019-09-27 13:59:24
【问题描述】：

我正在尝试通过按下时的 TouchableOpacity 在 View 上添加徽章。问题是动画作品一次只出现在一个元素上，而不是同时出现在两个或多个上

这里是代码：

平面列表：

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

徽章函数将Token添加到数组和午餐动画中：

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

我在这个麻烦上浪费了很多时间。建议？

【问题讨论】：

标签： react-native animation react-native-flatlist

【解决方案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
                    data={this.state.ReturnedArray}
                    width='100%'
                    ItemSeparatorComponent={this.FlatListItemSeparator}
                    keyExtractor={item => item.user_id.toString()}
                    renderItem={item => this.renderizza(item)}
                    extraData={this.state}
                />

来源：Link here

【讨论】：