React-native 下拉弹框选择（根据网上省 市 区插件改写）

/**  * Created on 2017/2/27.  */  import React,{ PropTypes } from 'react';
import {
    View,Text,Modal,Dimensions,Picker,StyleSheet,TouchableOpacity,Platform,} from 'react-native';

import BaseComponent from './BaseComponent';
import HttpHelper  from '../Utils/HttpHelper';

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

const isIos = Platform.OS === 'ios';

export default class WheelPicker extends BaseComponent {

    constructor(props) {
        super(props);
        this._bind(
            'open','close','_handleProvinceChange','_handleCityChange','_handleSubmit','_handleCancel'  );

        this.state = {
            isVisible: this.props.isVisible,provinces: [],citys: [],selectedProvince: this.props.selectedProvince,selectedCity: this.props.selectedCity,selectedProvinceName: this.props.selectedProvinceName,selectedCityName: this.props.selectedCityName,transparent: true,};
    }

    
    _filterAllProvinces() {
        return this._regionAllData.map((item) => {
            return item;
        });
    }

    _filterCitys(provinceId) {
        const provinceData = this._regionAllData.find(item => item.area.id == provinceId);
        return provinceData.ports;
    }

    //_regionAllData 为了提高数据显示速度，该变量在应用启动时异步已经获取，并放入global中存入，另外_regionAllData需要按照固定的json格式返回
     {"area":{"id":10,"name":"东北"},"ports":[{"id":94,"name":"鲅鱼圈","areaId":10},{"id":84,"name":"丹东","areaId":10}
             }]
       }
    componentDidMount() {        
 let parentThis = this;        
        parentThis._regionAllData = global.root.regionAllData;        
 const provinces = parentThis._filterAllProvinces();        
 if(!parentThis.state.selectedProvince) {            
           parentThis.state.selectedProvince = provinces[0].area.id;            
           parentThis.state.selectedProvinceName = provinces[0].area.name;        
        }        
 const citys = parentThis._filterCitys(parentThis.state.selectedProvince);        
 if(!parentThis.state.selectedCity) {            
            parentThis.state.selectedCity = citys[0].id;            
            parentThis.state.selectedCityName = citys[0].name;        
        }        
        parentThis.setState({
           provinces,
            citys,
        });        
 global.root.requestCity();    
     }    
     componentWillReceiveProps(props) {        
 if (props.isVisible !== this.props.isVisible) {            
 if (props.isVisible) {                
                  this.open();            
             } else {                
                 this.close();            
             }        
         }else if((props.isVisible && this.props.isVisible)==true){            
 this.setState({isVisible: props.isVisible});        
         }    
      }    
     close() {        
 this.setState({ isVisible: false });    
     }    
     open() {        
        this.setState({ isVisible: true });    
     }    
     _handleProvinceChange(provinceId,position) {        
        const cities = this._filterCitys(provinceId);        
       this.setState({            
 selectedProvince: provinceId,
            selectedProvinceName:this.state.provinces[position].area.name,
            selectedCity: cities[0].id,
            selectedCityName:cities[0].name,
 citys:cities        
       });    
     }    
     _handleCityChange(city,position) {        
 this.setState({            
 selectedCity: city,
 selectedCityName:this.state.citys[position].name 
          });    
     }    
     _handleCancel() {        
          if (this.props.onCancel) {            
 this.props.onCancel();        
          }    
     }    
     _handleSubmit() {        
 if (this.props.onSubmit) {            
 this.props.onSubmit({                
 areaId: this.state.selectedProvince,
 areaName:this.state.selectedProvinceName,
                portId: this.state.selectedCity,
 portName:this.state.selectedCityName 
            });        
          }    
     }    
     renderPicker() {        
        const { navBtnColor } = this.props;        
 return (            
           <View style={styles.overlayStyle}>                
                <View style={[styles.pickerContainer]}>                    
                    <View style={styles.navWrap}>                        
                       <TouchableOpacity style={[styles.navBtn,{ borderColor: navBtnColor }]}  
                          activeOpacity={0.85}     onPress={this._handleCancel} >                            
                            <Text style={[styles.text,{ color: navBtnColor }]}>取消</Text> 
                       </TouchableOpacity>                        
                       <TouchableOpacity style={[styles.navBtn,{ backgroundColor: navBtnColor,borderColor: navBtnColor }]} 
                          activeOpacity={0.85}   onPress={this._handleSubmit} >                            
                           <Text style={[styles.text,{ color: 'white' }]}>确认</Text>  
                       </TouchableOpacity>                    
                    </View>                    
                    <View style={styles.pickerWrap}>  
                       <Picker style={styles.pickerItem}   onValueChange={this._handleProvinceChange}    
                        selectedValue={this.state.selectedProvince} >    
                        {this.state.provinces.map((province,index) => {   
                           return (                                    
                             <Picker.Item value={province.area.id+''} label={province.area.name} key={index}/> 
                               ); })}                    
                       </Picker>                       
                       <Picker style={styles.pickerItem}  onValueChange={this._handleCityChange}  
                          selectedValue={this.state.selectedCity}     >
                           {this.state.citys.map((city,index) => {   
                             return (                                   
                              <Picker.Item value={city.id+''} label={city.name} key={index}/>  
                              );
                           })}                        
                       </Picker>
                 </View>                
             </View>            
          </View >        
        );    
       }    
       render() {        
          const modal = (            
            <Modal transparent={this.state.transparent}   visible={this.state.isVisible} 
               onRequestClose={this.close}    
            animationType={this.props.animationType}  > 
                 {this.renderPicker()}            
            </Modal>        
          );        
          return ( 
                 <View> {modal}
                   <TouchableOpacity onPress={this.open}> 
                       {this.props.children}
                    </TouchableOpacity>
                 </View>        
               );    
        }
     }

WheelPicker.propTypes = {    
isVisible: PropTypes.bool,
selectedProvince: PropTypes.string,
selectedCity: PropTypes.string,
navBtnColor: PropTypes.string,
animationType: PropTypes.string,
transparent: PropTypes.bool,
onSubmit: PropTypes.func,
onCancel: PropTypes.func,
androidPickerHeight: PropTypes.number,
};

WheelPicker.defaultProps = {    
isVisible: false,
selectedProvince: '',
selectedCity: '',
navBtnColor: 'blue',
animationType: 'slide',
transparent: true,
onSubmit: () => {},
onCancel: () => {},
androidPickerHeight: 50
};
const styles = StyleSheet.create({
 overlayStyle: {
 flex: 1,
 width: windowWidth,
 height: windowHeight,
    left: 0,
    position: 'absolute',
    backgroundColor: 'rgba(0,0.65)',
  },
  pickerContainer: {
    flex: 1,
    marginTop: windowHeight * 3 / 5,
    backgroundColor: '#FFF',
  navWrap: {        
 paddingHorizontal: 15,
     paddingVertical: 8,
 justifyContent: 'space-between',
     alignItems: 'center',
     flexDirection: 'row',
     borderBottomWidth: 1,
 borderTopWidth: 1,
 borderColor: '#ccc' 
   },
 navBtn: {        
     paddingVertical: 5,
     paddingHorizontal: 20,
    borderWidth: 1,
    borderRadius: 4
  },
   text: {        
     fontSize: 18,
   },
 pickerWrap: {        
 flexDirection: 'row' 
   },
 pickerItem: {        flex: 1}});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!