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": "北京市" } ]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。