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, 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    }});