如何在 FlatList 中选择多个项目，突出显示它们并将它们保存在 React Native 中

Question

我想从 FlatList 中选择多个项目。每当我点击它们时，它们应该被突出显示并且它们应该被保存在某个状态变量中

我正在使用“react-native-android-installed-apps”来获取 FLatList 中所有已安装应用的列表

这是我到目前为止所做的：

import React, {Component} from 'react';
import {View, Text, Image, FlatList, Dimensions, TouchableOpacity} from 'react-native';
import RNAndroidInstalledApps from 'react-native-android-installed-apps';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: []
        };
    }

    componentDidMount() {
        this.check();
    }

    check = () => {
        let combine = [];
        RNAndroidInstalledApps.getApps()
            .then(apps => {
                if(apps.length > 0) {
                    for(let i = 0; i< apps.length ; i++) {
                        thisApp = apps[i];
                        const obj = {'appName': thisApp.appName, 'icon': thisApp.icon};
                        combine.push(obj);
                    }
                }
                this.setState({
                    data: combine
                });
                // console.log(this.state.data);
            });
    };

    renderSeperator = () => {
        return(
            <View
                style={{
                    height: 1,
                    backgroundColor: '#CED0CE',
                }}
            />
        );
    };

    render() {
        return(
        <FlatList
                data={this.state.data}
                renderItem={({ item }) =>(
                    <TouchableOpacity
                        style={{flexDirection:'row', padding: 5 }}
                    >
                        <Image
                            style={{width: 51, height: 51, resizeMode: 'contain', flex: 1 }}
                            source={{ uri: `data:image;base64,${item.icon}` }}
                        />
                        <Text style={{alignSelf: 'center', marginStart: 10, flex: 5 }}>{item.appName}</Text>
                    </TouchableOpacity>
                )}
                keyExtractor={(item) => item.appName}
                ItemSeparatorComponent={this.renderSeperator}
        />
        );
    }
}

export default App;

我希望在选中每个项目时突出显示它，并将其数据保存在某个状态变量中

Answer 1

让我们用一些数组checkList 来做这件事，我们把它放在状态中， FlatList 看起来像这样：

<FlatList
     data={this.state.data}
     renderItem={({ item }) =>(
    <TouchableOpacity
    onPress={()=>{
      const list = this.state.checkList; 
      list.push(item)
      this.setState({checkList: list})
    }}
    style={{flexDirection:'row', padding: 5 }} >
  <Image
       style={{width: 51, height: 51, resizeMode: 'contain', flex: 1 }}
       source={{ uri: `data:image;base64,${item.icon}` }}
      />
  <Text style={{alignSelf: 'center', marginStart: 10, flex: 5 }}>{item.appName}</Text>
       </TouchableOpacity>
           )}
           keyExtractor={(item) => item.appName}
           ItemSeparatorComponent={this.renderSeperator}
        />

这样您可以保存所有点击的项目，您可以进一步开发它并在再次点击时从列表中删除或更改检查列表的颜色

Answer 2

想通了：

import React, {Component} from 'react';
import {View, Text, Image, FlatList, TouchableOpacity} from 'react-native';
import RNAndroidInstalledApps from 'react-native-android-installed-apps';

var selected = [];
class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
            itemChecked: []
        };
    }

    componentDidMount() {
        this.check();
    }

    check = () => {
        let combine = [];
        RNAndroidInstalledApps.getApps()
            .then(apps => {
                if(apps.length > 0) {
                    for(let i = 0; i< apps.length ; i++) {
                        thisApp = apps[i];
                        const obj = {'appName': thisApp.appName, 'icon': thisApp.icon, 'isSelect': false};
                        combine.push(obj);
                    }
                }
                this.setState({
                    data: combine
                });
                // console.log(this.state.data);
            });
    };

    renderSeperator = () => {
        return(
            <View
                style={{
                    height: 1,
                    backgroundColor: '#CED0CE',
                }}
            />
        );
    };

    selectItem = (item) => {
        item.isSelect = !item.isSelect;
        if(item.isSelect){
            selected.push(item.appName);
        } else {
            for(let i = 0; i < selected.length; i++) {
                if(selected[i] === item.appName) {
                    selected.splice(i, 1)
                }
            }
        }
        this.setState({itemChecked: selected});
    };

    renderRow = (item) => {
        const isSelected = item.isSelect;
        const viewStyle = isSelected ? styles.selected : styles.normal;
        return(
            <TouchableOpacity
                style={viewStyle}
                onPress={() => this.selectItem(item)}
            >
                <Image
                    style={{width: 51, height: 51, resizeMode: 'contain', flex: 1 }}
                    source={{ uri: `data:image;base64,${item.icon}` }}
                />
                <Text style={{alignSelf: 'center', marginStart: 10, flex: 5 }}>{item.appName}</Text>
            </TouchableOpacity>
        );
    };

    render() {
        return(
        <FlatList
                data={this.state.data}
                renderItem={({item}) => this.renderRow(item)}
                keyExtractor={(item) => item.appName}
                ItemSeparatorComponent={this.renderSeperator}
                extraData={this.state}
        />
        );
    }
}

const styles = {
    selected: {
        flexDirection: 'row',
        padding: 5,
        backgroundColor: 'blue'
    },
    normal: {
        flexDirection: 'row',
        padding: 5
    }    
}

export default App;

Answer 3

为此，您可以使用库 react-native-sectioned-multi-select

https://github.com/renrizzolo/react-native-sectioned-multi-select中的文档