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

小咪咪 2021-09-18 13:50 471阅读 0赞

选择

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3_size_16_color_FFFFFF_t_70][]

返回的值：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3_size_16_color_FFFFFF_t_70 1][]

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}}/>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3_size_16_color_FFFFFF_t_70]: /images/20210908/670a93faacad4a298e04c0b9b9c0d3cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3_size_16_color_FFFFFF_t_70 1]: /images/20210908/bba6f88e6ab24a6bb4a10fdab4af78fe.png