ReactNative 省市县镇地址选择联动的简单封装

全国地址的json数据我是从直接放在本地的文件夹下面,也可以自己从其他fetch过来

json数据连接地址
样式比较简陋,我只定义了切换按钮的颜色和地址显示的颜色,可以自己更改

可以联动级数可以通过 state中的 maxAdressLevel 属性自行配置

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Alert,
} from 'react-native';
import AdressData from './adress.json';

// 按钮的颜色和样式
const LEVEL_NORMAL_COLOR = '#eee'; //选择省市县按钮的颜色
const LEVEL_ACTIVE_COLOR = 'lightblue';
const ADRESS_COLOR = '#FFFFFF';//地址的颜色
const ADRESS_ACTIVE_COLOR = 'orange';

const styles = StyleSheet.create({
    rowContainer:{
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-around',
        borderWidth:1,
        borderColor:'#ddd',
        marginRight:3,
        marginLeft:3,
    },

    buttonStyle:{
        height:35,
    },

    buttonsTextContainer:{
        height:35,
        display:'flex',
        flexDirection:'column',
        justifyContent:'center',
        alignSelf:'center'
    },

    buttonsText:{
        color:'#FFFFFF',
        textAlign:'center',
    },

    adressContainer:{
        flex:1,
        display:'flex',
        flexDirection:'row',
        padding:5,
        flexWrap:'wrap',
    },

    adressButton:{
        padding:8,
        paddingLeft:12,
        paddingRight:12,
        borderWidth:1,
        borderColor:'#CCC',
        borderRadius:5,
        backgroundColor:'#eee',
        margin:5,
    }
})



export default class AdreesPicker extends Component{

  constructor(props){

      super(props);

      this.state={
        currentAdressLevel:1, //当前选择的地区级别（省、市、县）
        maxAdressLevel:4,//最大可选地区的级别
        buttonsText:['省','市','县','镇'],//按钮的提示文字
        levelIndex:0,//当前渲染的等级(省:0,市：1，县：2，镇：3，村：4)
        provinceData:[],
        citesData:[],
        areasData:[],
        streetData:[],
        renderData:[],//要选择渲染的数据(省/市/县/镇/村)
        renderAdressIndex:0,//当前渲染的(省/市/县/镇/村)的index
        
        provinceIndex:0,
        citesIndex:0,
        areasIndex:0,
        streetIndex:0,
        
        provinceSelected:'',
        citySelected:'',
        areaSelected:'',
        streetSelected:''
      }
    }


    //选择渲染
    innerFunc = (object) =>{
        if(!!object && object !== []){
            this.setState({
                renderData:object
            })
        }
    }

    // 更新渲染
    updateRenderData = (index)=>{
        if(index === 0){
            this.innerFunc(this.state.provinceData);
        }else if(index === 1){
            this.innerFunc(this.state.citesData)
        }else if(index === 2){
            this.innerFunc(this.state.areasData)
        }else if(index === 3){
            this.innerFunc(this.state.streetData)
        }else{}
    }

    //初始化省份数据
    initProvinceData = ()=>{
        //初始化省份
        this.setState({provinceData:AdressData,provinceSelected:AdressData[this.state.provinceIndex].name},()=>{
            //更新渲染数据
            this.updateRenderData(this.state.levelIndex);
            //更新市
            this.updateCitiesData(this.state.provinceIndex);
        })
    }

    //更新市数据
    updateCitiesData = (index)=>{
        this.setState({citesData:this.state.provinceData[index].children},()=>{
            //更新县
            this.updateAreasData(this.state.citesIndex);
        })
    }


    //更新县数据
    updateAreasData = (index) =>{
        this.setState({areasData:this.state.citesData[index].children},()=>{
            //更新镇
            this.updateStreetData(this.state.areasIndex);
        })
    }


    //更新镇数据
    updateStreetData = (index) =>{
        this.setState({streetData:this.state.areasData[index].children},()=>{
            //...
        })
    }

    //选择当前的地区级别
    selectAdressLevel = (index)=>{
        this.setState({
            levelIndex:index,
        })
        //更新渲染数据
        this.updateRenderData(index);
    }



    //点击选择地址
    adressSelect = (index)=>{
        
        const {
            levelIndex,
            provinceData,
            citesData,
            areasData,
            streetData,
            citySelected,
            areaSelected,
            provinceIndex,
            citesIndex,
            areasIndex,
            streetIndex,
        } = this.state;

        //如果选择省份，更新市和县的数据，将省的index置为所选择的省份的index，将市的index和县的index置为0
        if(levelIndex === 0 && provinceIndex !== index){
            
            this.setState({
                provinceIndex:index,
                citesIndex:0,
                areasIndex:0,
                provinceSelected:provinceData[index].name,
                citySelected:'',
                areaSelected:'',
                streetSelected:'',
            },()=>{
                this.updateCitiesData(index);
                this.updateAreasData(0)
            })
            
        }

        //如果选择的市,更新县的数据，将市的index置为所选的市的index，将县的index置为0
        else if(levelIndex === 1 && citesIndex !== index){
            this.setState({
                citesIndex:index,
                areasIndex:0,
                citySelected:citesData[index].name,
                areaSelected:'',
                streetSelected:'',
            },()=>{
                this.updateAreasData(index)
            })
        }

        //如果选择的为县，则更新镇的数据，将县的index置为所选的index，将镇的index置为0
        else if(levelIndex === 2 && areasIndex !== index){
            this.setState({
                areasIndex:index,
                streetIndex:0,
                citySelected:citySelected === '' ? ''+citesData[citesIndex].name : citySelected,
                areaSelected:areasData[index].name,
                streetSelected:'',
            },()=>{
                this.updateStreetData(index)
            })

        }

        //如果选择的为镇，将镇的index置为所选的index
        else if(levelIndex === 3 && streetIndex !== index){
            this.setState({
                streetIndex:index,
                citySelected:citySelected === '' ? ''+citesData[citesIndex].name : citySelected,
                areaSelected:areaSelected === '' ? ''+areasData[areasIndex].name : areaSelected,
                streetSelected:streetData[index].name
            },()=>{
                // ...
            })
        }
    }


    componentDidMount(){
        this.initProvinceData();
    }

    render(){

        const {
            buttonsText,
            maxAdressLevel,
            levelIndex,
            renderData,
            provinceIndex,
            citesIndex,
            areasIndex,
            provinceSelected,
            citySelected,
            areaSelected,
            streetSelected,
            streetIndex
        } = this.state;


        return(

            <View style={{flex:1}}>

                {/*选择的信息*/}
                <View>
                    <Text>当前选择的地址：{''+provinceSelected+' '+citySelected+' '+areaSelected +' '+streetSelected}</Text>
                </View>

                {/*按钮*/}
                <View style={styles.rowContainer}>
                    {
                        buttonsText.map((value,index)=>{
                            if(index < maxAdressLevel)
                            return (
                            <TouchableOpacity
                                key={index}
                                style={[styles.buttonStyle,{width:100/maxAdressLevel+'%',backgroundColor:index === levelIndex?LEVEL_ACTIVE_COLOR:LEVEL_NORMAL_COLOR}]}
                                onPress={()=>{this.selectAdressLevel(index)}}
                            >
                                <View style={styles.buttonsTextContainer}>
                                    <Text style={styles.buttonsText}>{value}</Text>
                                </View>
                            </TouchableOpacity>)
                        })
                    }
                </View>

                {/*地址*/}
                <View style={styles.adressContainer}>
                    { 
                        renderData.map((value,index)=>{
                            return(
                                <TouchableOpacity
                                    style={[styles.adressButton,{backgroundColor:
                                        this.state.levelIndex === 0 ? (provinceIndex===index?ADRESS_ACTIVE_COLOR:ADRESS_COLOR):
                                        (
                                            this.state.levelIndex === 1 ? (citesIndex===index?ADRESS_ACTIVE_COLOR:ADRESS_COLOR):
                                            (
                                                this.state.levelIndex === 2 ? (areasIndex===index?ADRESS_ACTIVE_COLOR:ADRESS_COLOR):
                                                (
                                                    this.state.levelIndex === 3 ? (streetIndex===index?ADRESS_ACTIVE_COLOR:ADRESS_COLOR):ADRESS_COLOR
                                                )
                                            )
                                        )
                                    }]}
                                    key={index}
                                    onPress={()=>{this.adressSelect(index)}}
                                >
                                    <Text>{value.name}</Text>
                                </TouchableOpacity>
                            )
                        })
                    }
                </View>

            </View>
        )
    }
}