如何在 'Flatlist' 中 select 多个复选框？

Question

我正在 flatlist 使用复选框，但无法在 flatlist 中 select 多个复选框。每次只有一个项目被 selected。想要根据列表添加动态复选框，并且必须使用一个函数处理所有复选框。我使用了以下代码，但它不起作用。任何帮助将不胜感激。

import React, { useState, useEffect } from 'react';                                                                              
    import {
      SafeAreaView,
      StyleSheet,
      Text,
      View,
      FlatList,
      TouchableOpacity,
      Image,
      ActivityIndicator,
    } from 'react-native';
    import CheckBox from '@react-native-community/checkbox';
    
    
    const App = () => {
    
      const [isLoading, setIsLoading] = useState(true);
      const [data, setData] = useState([]);
    
      useEffect(() => {
        getListPhotos();
        return () => {
        }
      }, [])
    
      getListPhotos = () => {
        const apiUrl = 'https://jsonplaceholder.typicode.com/photos';
        fetch(apiUrl)
          .then((res) => res.json())
          .then((resJson) => {
            setData(resJson);
          }).catch((err) => { console.error('Error', err); })
          .finally(() => setIsLoading(false))
      }
    
    
      onChangeValue = (item, index) => {
        const newData = data.map(newItem => {
          if (newItem.id == item.id) {
            return {
              ...newItem,
              selected: true,
            }
          }
          return {
            ...newItem,
            selected: false,
          }
        })
        setData(newData);
      }
    
      renderItem = ({ item, index }) => {
        return (
          <View style={styles.item}>
            <Image style={styles.image}
              source={{ uri: item.url }}
              resizeMode='contain'
            />
            <View style={styles.wrapText}>
              <Text >{item.title}</Text>
              <CheckBox
                value={item.selected}
                style={styles.ckItem}
                disabled={false}
                onAnimationType='fill'
                offAnimationType='fade'
                boxType='square'
                onValueChange={() => onChangeValue(item, index)}
              />
            </View>
          </View>
        )
      }
      
      return (
        <SafeAreaView style={styles.container}>
          {isLoading ? <ActivityIndicator /> : (<FlatList
            style={styles.list}
            data={data}
            renderItem={renderItem}
            //keyExtractor={(item, index) => item.id}
             keyExtractor={item => `key-${item.id}`}
          />)}
          <View>
            <Text style={styles.wrapButton}></Text>
            <TouchableOpacity style={styles.button}>
              <Text>
                Show item you selected
              </Text>
            </TouchableOpacity>
          </View>
        </SafeAreaView>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
      list: {
        flex: 1,
        padding: 8,
      },
      wrapButton: {
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
      },
      button: {
        padding: 16,
        backgroundColor: 'orange',
        // justifyContent:'center',
        // alignItems:'center',
        alignSelf: 'center',
        width: '50%'
      },
      item: {
        marginTop: 8,
        flexDirection: 'row',
        padding: 4,
        shadowColor: '#000',
        shadowOffset: {
          width: 0, height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5,
      },
      image: {
        width: 100,
        height: 150,
      },
      wrapText: {
        flex: 1,
        marginTop: 16,
        marginLeft: 8,
      },
      ckItem: {
        width: 20,
        height: 20,
        marginTop: 5,
    
      },
    });
    
    export default App;

Answer 1

您可以使用以下插件实现

https://bestofreactjs.com/repo/tableflip-react-native-select-multiple-react-react-native-awesome-components

https://github.com/vakiller/react-native-flatlist-multiple-choose/blob/master/readme.md

Answer 2

onValueChange={newValue => onChangeValue(item, index, newValue)}

onChangeValue = (item, index, newValue) => {
    const newData = data.map(newItem => {
      if (newItem.id == item.id) {
        return {
          ...newItem,
          selected: newValue,
        }
      }
      return newItem
    })
    setData(newData);
  }