第一次发文章，代码有点low将就着看吧
json数据下面给地址，自己下载改改路径或者直接fetch过来
/*
* @Author: panyang
* @Date: 2018-08-30 14:58:31
* @LastEditors: panyang
* @LastEditTime: 2018-08-30 15:05:08
* @Description: AdressPicker component
*/
import React,{Component}from 'react';
import{
View,
Text,
StyleSheet,
TouchableOpacity
}from 'react-native';
import AdressData from '../data/adress.json';
//样式表
const LEVEL_NORMAL_COLOR = '#eee'; //选择省市县按钮的颜色
const LEVEL_ACTIVE_COLOR = 'lightblue';
const ADRESS_COLOR = '#eee';//地址的颜色
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,
citesIndex,
areasIndex,
} = this.state;
//如果选择省份，更新市和县的数据，将省的index置为所选择的省份的index，将市的index和县的index置为0
if(levelIndex === 0){
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){
this.setState({
citesIndex:index,
areasIndex:0,
citySelected:citesData[index].name,
areaSelected:'',
streetSelected:'',
},()=>{
this.updateAreasData(index)
})
}//如果选择的为县，则更新镇的数据，将县的index置为所选的index，将镇的index置为0
else if(levelIndex === 2){
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){
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>
)
}
}
网友评论