React Native 單選，複選, 全選功能

簡單寫了一個ListView資料的單選和全選，删除功能

1. 利用JS的Map對象進行勾選，取消勾選和全選
2. 方法簡單粗暴
3. 單選功能見注釋的 單選邏輯 ， 單選功能不做全選
4. 其餘未注釋的代碼為複選和全選功能

/**
 * Created by zhuang.haipeng on //
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    TouchableOpacity,
    Dimensions,
    ListView,
    Text,
    Image
} from 'react-native';

const {width, height} = Dimensions.get('window');

var collectionArray = [
    {collectItem: "collectItem1"},
    {collectItem: "collectItem2"},
    {collectItem: "collectItem3"},
    {collectItem: "collectItem4"},
    {collectItem: "collectItem5"},
    {collectItem: "collectItem6"},
    {collectItem: "collectItem7"},
    {collectItem: "collectItem8"},
    {collectItem: "collectItem9"},
    {collectItem: "collectItem10"}
];

export default class extends React.Component {

    constructor(props) {
        super(props);

        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([]),
            isEdit: false,
            isChecked: false,
            isAllSelect: false,
            isShowBottom: false,
            selectMap: new Map(),
            // preIndex: 0 // 聲明點選上一個按鈕的索引  **** 單選邏輯 ****
        };
    }

    componentDidMount() {
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(collectionArray)
        })
    }

    render() {
        let temp = [...this.state.selectMap.values()];
        let isChecked = temp.length === this.state.dataSource._cachedRowCount;

        console.log(temp, '......')
        return (
            <View style={{flex:}}>
                <View style={{width: width, height: , backgroundColor:"#FFF",
                justifyContent:"flex-end", paddingRight: , flexDirection:'row', alignItems:"center"}}>
                    <TouchableOpacity onPress={() => this.editClick()}>
                        <Text>編輯</Text>
                    </TouchableOpacity>
                </View>
                <ListView
                    renderRow={this.renderRow}
                    dataSource={this.state.dataSource}

                >
                </ListView>
                {
                    this.state.isShowBottom == true ?
                        <View style={{width: width, height: , backgroundColor:"#FFF",
                justifyContent:"space-between", paddingRight: , flexDirection:'row', alignItems:"center"}}>
                            <TouchableOpacity style={{flexDirection:'row'}} onPress={() => this.allSelect(isChecked)}>
                                <Image style={{marginLeft:}} source={isChecked ? require("../img/mine/ic_select.png") :
                            require("../img/mine/ic_unselect.png")}/>
                                <Text style={{marginLeft:, color: "#cc3341", marginTop:}}>全選</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.deleteItem()}>
                                <Text style={{marginRight: , color:"#cc3341"}}>删除</Text>
                            </TouchableOpacity>
                        </View> : null
                }
            </View>
        );
    }

    renderRow = (rowData, sectionID, rowID) => { // cell樣式

        let map = this.state.selectMap;
        let isChecked = map.has(parseInt(rowID))
        // 選中的時候, 判斷上一個索引不等于rowID的時候,不讓他選中   **** 單選邏輯 ****
        // let isChecked = parseInt(rowID) == this.state.preIndex ?  map.has(parseInt(rowID)) : false; // 将rowID轉成Int,然後将Int類型的ID當做Key傳給Map

        return (
            <View style={{width: width, height: , backgroundColor:"#EEEEDD",
             marginBottom: , alignItems:"center", justifyContent:'center', marginLeft: this.state.isEdit ?  : }}>
                {
                    this.state.isEdit ?
                        <TouchableOpacity style={{position:'absolute', left:-}} onPress={
                        () => this.selectItem(parseInt(rowID), rowData.collectItem ,isChecked)}>
                            <Image source={isChecked ? require("../img/mine/ic_select.png") :
                            require("../img/mine/ic_unselect.png")}/>
                        </TouchableOpacity> : null
                }
                <Text>{rowData.collectItem}</Text>
            </View>
        )
    }

    editClick = () => { // 編輯
        this.setState({
            isEdit: !this.state.isEdit,
            selectMap: new Map()
        }, () => {
            this.setState({
                isShowBottom: this.state.isEdit ? true : false
            })
        })
    };

    deleteItem = () => { // 删除
        let {selectMap} = this.state;
        let valueArr = [...selectMap.values()];
        let keyArr = [...selectMap.keys()];
        alert("删除" + valueArr)
    };

    allSelect = (isChecked) => { // 全選
        this.setState({
            isAllSelect: !isChecked
        });
        if (isChecked) { // 如果已經勾選了,則取消選中
            let {selectMap} = this.state;
            selectMap = new Map();
            this.setState({selectMap})
        } else { // 沒有勾選的, 全部勾選
            let newMap = new Map();
            for (let key = ; key < collectionArray.length; key++) {
                let value = collectionArray[key].collectItem; // 拿到數組的collectItem
                newMap.set(key, value) // 第一個key, 第二個是value
            }
            this.setState({selectMap: newMap})
        }
    }

    selectItem = (key, value, isChecked) => { // 單選

        this.setState({
            isChecked: !this.state.isChecked,
            // preIndex: key  //  **** 單選邏輯 ****
        }, () => {
            let map = this.state.selectMap;
            if (isChecked) {
                map.delete(key, value) // 再次點選的時候,将map對應的key,value删除
            } else {
                // map = new Map() // ------>   **** 單選邏輯 ****
                map.set(key, value) // 勾選的時候,重置一下map的key和value
            }
            this.setState({selectMap: map})
        })
    }
};