自定義彈框單選

import React from 'react';
import {View,Text,TouchableOpacity,FlatList,Modal,StyleSheet} from 'react-native';
import {Checkbox} from '@ant-design/react-native';
import Requestor from "../util/Requestor";


/**
 * 
 * 列表主界面
 * 代碼更加簡潔，邏輯清晰，易讀性較高，便於維護
 * 
 * **/
export default class NewSelectOneList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            dataSource:null
        }
    }
    async componentDidMount(){
        // come from here get some data;
        let aList = await Requestor.get('/api/rfid_label/query.select.data');
        this.setState({
            dataSource: aList.data.users,//獲取人員列表
        })
    }

    //得到組件返回的數據
    returnData=((e,data)=>{
        console.log("得到組件返回的數據",data)
    })

    render(){
        let {dataSource} = this.state;
        return <View style={{flex:1,width:"100%",height:"100%"}}>
                {dataSource&&
                    <FlatNewList 
                        defaultName="叉車人員" 
                        onSelectNext={this.returnData} 
                        dataSource={dataSource}
                        // defaultId={343}//如果有默認值
                    />}
        </View>
    }
}

/**
 * 
 * 數據處理中心
 * 
 * **/ 

 class DataProgressCenter{
     newListData= [];
     result={};
     defaultName="請選擇"
     constructor(newProps){//對數據進行重新整改----對於需要重新處理的數據
            let {defaultId,dataSource} = newProps;
        for(let i=0;i<dataSource.length;i++){
            if(defaultId&&defaultId==dataSource[i].id){
                this.defaultName=dataSource[i].realName;
                this.newListData.push({id:dataSource[i].id,name:dataSource[i].realName,rfid:dataSource[i].rfid,select:true}) 
                this.result=this.newListData[i];
            }else{
                this.newListData.push({id:dataSource[i].id,name:dataSource[i].realName,rfid:dataSource[i].rfid,select:false})
            }
            
        }
     }
   
     changeData(index){
        this.newListData.map((item,ii)=>{
            if(index==ii){//選中 當前的更改狀態，其他選中的更改爲false
                this.newListData[ii].select = !item.select;
                this.result=this.newListData[ii];
            }else{
                this.newListData[ii].select=false;
            }  
        })
        return this.newListData;
     }

     //關閉彈窗方法，重置數據
     closeData(index){
        this.newListData.map((item,ii)=>{
                this.newListData[ii].select=false; 
        })
        return this.newListData;
     }

 }

/***
 * 
 * 數據列表展示
 *  @params defaultName="叉車人員"  左側文字
    @params onSelectNext={this.returnData} 數據返回
    @params dataSource={dataSource} 數據源
    @params defaultId={343}//如果有默認值id
 * ***/
class FlatNewList extends React.Component{
    constructor(props){
        super(props);
        this._startRun(props);
    }

    componentWillReceiveProps(props){
        this._startRun(props);
    }

    _startRun(props){
        let propsData = new DataProgressCenter(props);//拿到新的數據
        this.state={
            data:propsData.newListData,
            propsData,
            showModel:false,
            resultName:propsData.defaultName,
            result:propsData.result
        };
    }

    onChangeSelect=(index)=>{
        let {propsData} = this.state;
        let newData = propsData.changeData(index);
        let result = propsData.result;
        this.setState({
            data:newData,
            resultName:result.select?result.name:"請選擇",
            result,
            index
        })
    }
    //取消選中
    cancel=()=>{
        let {propsData,index} = this.state;
        propsData.closeData(index);
        this.setState({
            showModel:false,
            resultName:"請選擇"
        })
        this.returnData();

    }
    //確認
    comform=()=>{
        this.setState({
            showModel:false
        });
        this.returnData();
    }

    //數據返回
    returnData(){
        let {result} = this.state;
        this.props.onSelectNext&&this.props.onSelectNext(this,result);    
    }

    render(){
        const {data,resultName,showModel} = this.state;
        const {defaultName} = this.props;
        return <View style={{flex:1,width:"100%",height:"100%"}}>
                    <View style={{flex:1,flexDirection:'row',justifyContent:'flex-start',alignContent:'center'}}>
                        <Text style={{padding:10}}>{defaultName}</Text>
                        <TouchableOpacity onPress={()=>this.setState({showModel:true})}>
                            <Text style={{padding:10,color:"#000000"}}>{resultName}</Text>
                        </TouchableOpacity>
                    </View>
                   {showModel&& <View style={{backgroundColor:'rgba(0,0,0,0.3)'}}>
                                    <Modal hardwareAccelerated={true} 
                                        animationType='slide' 
                                        transparent={true} >
                                        <TouchableOpacity style={{width:'100%',height:'40%',backgroundColor:'rgba(0,0,0,0.3)'}} onPress={()=>this.cancel()}></TouchableOpacity>
                                        <View style={{backgroundColor:"#ffffff",height:'60%'}}>
                                            <View style={{backgroundColor:"#456753",flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                                                <TouchableOpacity onPress={()=>this.cancel()}>
                                                    <Text style={{padding:10,color:"#FFFFFF"}}>關閉</Text>
                                                </TouchableOpacity>
                                                <TouchableOpacity onPress={()=>this.comform()}>
                                                    <Text style={{padding:10,color:"#FFFFFF"}}>確定</Text>
                                                </TouchableOpacity>
                                            </View>
                                            <FlatList style={{marginTop:8,width:'100%',}} 
                                                data = {data} keyExtractor={(item, index) => index.toString()}
                                                renderItem={({item,index}) =>
                                                    <View key={index} style={{paddingLeft:15,marginLeft:5,marginBottom:5,backgroundColor:'#eee',paddingTop:8,paddingBottom:8,width:'95%',borderRadius:5}}>
                                                        <Checkbox checked={item.select} onChange={(e)=>this.onChangeSelect(index)}>
                                                            <Text style={{color:'black',fontSize:12,paddingTop:8,paddingBottom:8,width:'78%'}}>{item.name}</Text>
                                                        </Checkbox>
                                                    </View>} 
                                            />
                                        </View>
                                </Modal>
                            </View>}
                </View>
    }
}