FlatList多选

FlitList多选，如图

截屏2021-02-19 下午5.48.12.png

import React from 'react';
import {
    View,
    FlatList,
    StyleSheet,
    TouchableHighlight
} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';

export default class TestFlatListSelect extends Component {
    constructor(props) {
        super(props);
        this.state = {
        this._navigationHeaderView = {
            title:'账号权限页面',
            rightButton: ViewUtil.getRightButton('完成', this._finishBtnClick)
        }
           projectList: [
                {"Desction":"普通","Name":"Gerneral","Key":1,"select":true},
                {"Desction":"为他人预订（含员工）","Name":"Agent","Key":2,"select":false},
                {"Desction":"差旅管理","Name":"Manager","Key":4,"select":false},
                {"Desction":"为员工预订","Name":"AgentForEmployee","Key":8,"select":false},
                {"Desction":"结算管理","Name":"Settlement","Key":16,"select":false},
                {"Desction":"报销管理","Name":"Reimbursement","Key":32,"select":false}
           ],
           selectItem: [],
        }
    }
_finishBtnClick = () =>{
        const {projectList} = this.state;
        // alert(`选中了${JSON.stringify(this.state.selectItem)}`)
        console.log(JSON.stringify(projectList));
    }
_backOrderClick = (item,index) => {
        if (item.select) {
            this.state.selectItem.splice(this.state.selectItem.findIndex(function (x) {
                   return x === item.Desction;
               }))
           } else {
               this.state.selectItem.push(item)
           }
           this.state.projectList[index].select = !item.select
           this.setState({projectList: this.state.projectList})
    }

_renderItem = ({ item, index }) => {
        return (
            <TouchableHighlight underlayColor='transparent' onPress={this._backOrderClick.bind(this, item,index)}>
                <View style={styles.row}>
                    <CustomText style={{ flex: 1, marginLeft: 10 }} numberOfLines={3} text={item.Desction} />
                    {item.select ?<AntDesign name={'check'} size={20} color={Theme.theme}></AntDesign>:null}
                </View>
            </TouchableHighlight>
        )
    }

render() {
        const { projectList } = this.state;
        return (
            <View style={{ flex: 1 }}>
                <FlatList
                    data={projectList}
                    renderItem={this._renderItem}
                    keyExtractor={(item, index) => String(index)}
                    extraData={this.state} //这里是关键，如果不设置点击就不会马上改变状态，而需要拖动列表才会改变
                />
            </View>
        )
    }

}