React Native实现地址挑选器功能(3)
使用方法:
import React, {Component} from 'react';
import {
StyleSheet,
View,
TouchableOpacity,
Alert,
ScrollView,
ART,
TouchableHighlight,
ListView,
Dimensions,
Text
} from 'react-native';
import {ReactNavComponent, Widget} from 'rn-yunxi';
import AddressSelect from '../../app-widget/address-select/index'
export default class extends React.Component {
render() {
return (
<TouchableOpacity style={{flex:1, justifyContent:'center', alignItems:'center'}} onPress={() => this.openAddressSelect()}>
<Text >地址选择</Text>
</TouchableOpacity>
);
}
openAddressSelect() {
Widget.Popup.show( // 这边使用自己封装的modal嵌套地址选择器
<AddressSelect
commitFun={(area) => this.onSelectArea(area)}
dissmissFun={() => Widget.Popup.hide()}
/>,
{
animationType: 'slide-up', backgroundColor: '#00000000', onMaskClose: () => {
Widget.Popup.hide()
}
})
}
onSelectArea = (area) => {
Log(area)
}
};
数据类型格式
[
{
"value": "110000000000",
"children": [
{
"value": "110100000000",
"children": [
{
"value": "110101000000",
"label": "东城区"
},
{
"value": "110102000000",
"label": "西城区"
},
{
"value": "110105000000",
"label": "朝阳区"
},
{
"value": "110106000000",
"label": "丰台区"
},
{
"value": "110107000000",
"label": "石景山区"
},
{
"value": "110108000000",
"label": "海淀区"
},
{
"value": "110109000000",
"label": "门头沟区"
},
{
"value": "110111000000",
"label": "房山区"
},
{
"value": "110112000000",
"label": "通州区"
},
{
"value": "110113000000",
"label": "顺义区"
},
{
"value": "110114000000",
"label": "昌平区"
},
{
"value": "110115000000",
"label": "大兴区"
},
{
"value": "110116000000",
"label": "怀柔区"
},
{
"value": "110117000000",
"label": "平谷区"
},
{
"value": "110118000000",
"label": "密云区"
},
{
"value": "110119000000",
"label": "延庆区"
}
],
"label": "北京市"
}
],
"label": "北京市"
}
]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。
