RN 使用Checkbox實現多選

這個多選功能使用的是Ant Design Mobile RN 庫中的 Checkbox來實現，話不多說直接上代碼

1、引入 import { Checkbox,} from '@ant-design/react-native';

2、聲明 const CheckboxItem = Checkbox.CheckboxItem;

3、使用

//  使用map實現多選
    private showMap() {
        let dataList: any[] = this.state.data
        if (dataList && dataList.length) {

            return dataList.map((item, index) => {
                return (
                    <CheckboxItem
                        key={index}
                        style={{ height: 70 }}
                        onChange={(event: any) => {
                            let bidDocId: number = item.bidDocId
                            // 保存選中結果list
                            let oData: any = this.state.bidDocIdList;
                            // 如果是選中狀態 則判斷bidDocIdList是否含有該對象，若無則添加
                            if (event.target.checked) {
                                if (!oData.includes(bidDocId)) {
                                     oData.push(bidDocId)
                                }

                            } else {
                            // 如果是未選中狀態 則判斷bidDocIdList是否含有該對象，若有則刪除
                                if (oData.includes(bidDocId)) {
                                    let indexC = oData.indexOf(bidDocId)
                                    oData.splice(indexC,1)
                                }

                            }
                            UtilsSuperCommon.logWarn(this.state.bidDocIdList);
                        }}
                    >
                        {/* 自定義控件 */}
                        <View style={{ flex: 1, paddingVertical: 15, flexDirection: 'row' }}>
                            <SelBidderView
                                bidderHeadImg={item.iconUrl}
                                bidderName={item.userName}
                            />
                        </View>
                    </CheckboxItem>
                );
            })
        }

    }