react-native自定义弹框多项选择组件

 react-native自定义弹框多项选择组件

 

选择

 

返回的值：

import React from 'react';
import {Checkbox} from 'antd-mobile-rn';
import {View,Text,Image,TouchableOpacity,Modal,TextInput,FlatList,ToastAndroid} from 'react-native';

export default class Selectmore extends React.Component{
    constructor(props){
        super(props)
        this.state={
            SelectData:this.props.SelectData,//数据源
            visible:false,//控制model显示隐藏
            activeItemObj:{},//选中的元素
        }
    }

    componentWillReceiveProps(nxprops){//接收新的props
        this.state.SelectData=nxprops.SelectData;
    }
   
    showListData(){//选中的内容显示
        let activeItem = this.state.activeItemObj;
        let display = [];
        for(let i in activeItem){
            if(activeItem[i]){
                display.push(activeItem[i]);
            }
        }
        if(display.length>0){
            return display.map((v,i)=><Text key={i} style={{width:'90%'}}>{v}</Text>);
        }else{
            return <Text>请选择</Text>
        }
    }

    option(){//点击确定---关闭model---数据返回父组件
            this.setState({
                visible:false,
                SelectData:this.props.SelectData
            });
            let activeItemObj = this.state.activeItemObj;
            let actives={};
            for(let i in activeItemObj){//过滤掉空的数据
                if(!!activeItemObj[i]){//如果存在数据，取出数据
                    actives[i] = activeItemObj[i];
                }
            }   
        this.props.opens(actives)
    }

    cansol(){//取消之后将model关闭，数据清空
        this.setState({
            visible:false,
            activeItemObj:{}
        });
        this.props.opens({});
    }

    selects(e,item){//选中元素---判断当前元素是否选中，选中将选中的元素添加到一个新的对象里面，否则设为空
        let s = e.target.checked;
        this.state.activeItemObj[item.id] = s?item.name:null;
        this.forceUpdate();
    }


    render(){
        let {color,fontSize} = {...this.props.TextColor}
        return(<View>
            <TouchableOpacity onPress={()=>this.setState({visible:true})}>
            <View style={{...this.props.style,backgroundColor:'white',minWidth:"95%",maxWidth:'95%'}}>
                   {this.showListData()}
            </View>
            </TouchableOpacity>
            {this.state.visible && <Modal animationType={'slide'} transparent={true} onRequestClose={()=>this.option()}>
            <View style={{backgroundColor:'rgba(0,0,0,.3)',width:'100%',height:'100%'}}>
            <TouchableOpacity style={{width:'100%',height:'40%'}} onPress={()=>{
                this.setState({visible:false});
            }}></TouchableOpacity>
            <View style={{width:'100%',backgroundColor:'white',height:'60%',borderTopStartRadius:5,borderTopEndRadius:5}}>
            <View style={{justifyContent:'space-between',flexDirection:'row',padding:7,alignItems:'center',borderTopStartRadius:5,borderTopEndRadius:5,backgroundColor:'#0390e8'}}>
            <Text style={{color:'white',fontSize:16}} onPress={()=>this.cansol()}>取消</Text>
            <Text style={{color:'white',fontSize:16}} onPress={()=>this.option()}>确定</Text>
            </View>
            <FlatList style={{height:'100%',marginTop:8}} data = {this.state.SelectData} keyExtractor={(item, index) => index.toString()}
                renderItem={({item,index}) =>{
                    let isChecked = this.state.activeItemObj[item.id];
                    if(isChecked == undefined){
                        isChecked = this.state.activeItemObj[item.id] = false;
                    }
                    return(<View key={index} style={{marginLeft:9,marginBottom:8,flexDirection:'row',padding:5,width:'95%'}}>
                    <Checkbox checked={!!isChecked} onChange={(e)=>this.selects(e,item)}>
                    <Text style={{width:'92%',left:5,color:'black',fontSize:fontSize?fontSize:18,borderBottomColor:'#ccc',borderBottomWidth:1,borderStyle:'solid',paddingTop:8,paddingBottom:8}}>{item.name}</Text>
                    </Checkbox>
                    </View>)
                  }}
                />
            </View>
            </View>
            </Modal>}
        </View>
        )

 

/*****
*
*数据源${SelectData}
*
****/
数据格式
let SelectData = [
	{name:'假数据111111',id:1},
	{name:'假数据222222',id:2},
	{name:'假数据333333',id:3},
	{name:'假数据444444',id:4},
	{name:'假数据555555',id:5},
]


使用：      
opens(v){//接收子组件传递过来的数据
         console.log('在这里处理子组件返回的值');
        
   }


<Selectmore 
        opens={this.opens.bind(this)} 
        SelectData={SelectData} 
        style={{flexWrap:'wrap',padding:6}} 
        TextColor={{color:'#666',fontSize:13}}/>