省市数据链接https://download.csdn.net/my/uploads/3/1

以下是省市数据的截图

react-native三级城市联动选择

然后在react-native代码中实现省市的选择,实现如下:

import areaData from '../../common/citydata';

export default class EditAddress extends Component<{}> {
    constructor(props) {
        super(props);

        this.state={
            
        };
    }

    //创建省市数据
    _createAreaData() {
        let that = this;
        let area =  areaData[0]["children"];
        console.log(area[0]["children"],"编辑地址获取到的结果");

        let data = [];
        let len = area.length;
        for(let i=0;i<len;i++){
            let city = [];
            for(let j=0,cityLen=area[i]['children'].length;j<cityLen;j++){
                let _city = {};
                _city[area[i]['children'][j]['value']] = that.getAreadData(area[i]['children'][j]['children']);
                city.push(_city);
            }

            let _data = {};
            _data[area[i]['value']] = city;
            data.push(_data);
        }
        return data;
    }
    getAreadData(res){
        let data = [];
        res.forEach(function(item,index){
            data.push(item.value);
        });
        return data;
    }
    //显示省市选择
    _showAreaPicker() {
        let that =this;
        Picker.init({
            pickerData: this._createAreaData(),//省市县数据
            selectedValue: ['北京市', '北京市', '东城区'],
            pickerConfirmBtnText:'确定',
            pickerCancelBtnText:'取消',
            pickerTitleText:'请选择地区',
            onPickerConfirm: pickedValue => {
                console.log('area', pickedValue);
            },
            onPickerCancel: pickedValue => {
                console.log('area', pickedValue);
            },
            onPickerSelect: pickedValue => {
                console.log('area', pickedValue);
            }
        });
        Picker.show();
    }
}

    

 

相关文章:

猜你喜欢
相关资源
相似解决方案