Expo : Select 平面列表的多项（更改样式）

Question

我正在尝试通过按下 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>

Badge函数添加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()
};

我在这个麻烦上浪费了好几天时间。建议 ?

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

Expo : Select 平面列表的多项（更改样式）

Expo : Select Multiple item of flatlist ( change style)

animation

react-native

react-native-flatlist