全国地址的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>
)
}
}
